100％高度的闪烁问题，固定位置元素

Question

我正在我的网站上实施侧导航栏。 为此，我按照本教程链接。 https://www.w3schools.com/howto/howto_js_sidenav.asp
我正在使用Sidenav叠加示例。
用于引用代码使用 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav HTML

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

CSS

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px; }

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s }

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1; }

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px; }

的JavaScript

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}

我面临两个问题：
1）滚动导航栏时，移动设备会出现闪烁问题 当我向下滚动并且不离开触摸屏时，问题就出现了，这样浏览器的URL栏就会消失。 一旦我离开触摸屏，它就会正确呈现。 它只发生在移动设备上。 肖像问题 景观问题

侧导航栏的高度为100％，当我将其设置为非常大的固定高度时，它可以在Android设备上运行，但不适用于iOS设备。
如果侧导航栏中的元素数量大于视口大小，则在固定高度的情况下，侧导航栏不再保持可滚动状态。
2）即使我将手指移到侧面导航栏的顶部，背景也是可滚动的。 当导航栏打开时，我试图为身体隐藏溢出，但它在UCBrowser，iOS设备中不起作用。