如何修复“在手机上轻弹屏幕时修复的元素错误”？

Question

这是我的第一个问题，希望我的英语不会造成阅读困难。

这是我的问题：

鼠标滚动都可以正常工作，但是在移动设备上滑动屏幕时，菜单出现了一些问题。

轻弹屏幕时，整页菜单会折断全高，然后在几秒钟后恢复。

bug demo

我尝试了很多解决方案，但是都没有用。

这是解决方案的文章：

Flickering when navigating between pages

IOS flicker bug when the css overflow:scroll is changed to overflow:hidden

这是我的网站

www.yamiwork2.icu

菜单代码：

<style>
/**************選單開關新版特效css*/
.hamb {
    margin-left: 0px;
    margin-top: 0px;
    z-index: 6000;
    cursor: pointer;
    display: inline-block;
}

div.icon {
    width: 22px;
    height: 1.9px;
    background-color: white;
    margin: 7px 0;
    transition-duration: 0.25s;
    transition-timing-function: cubic-bezier(.17, .67, .83, .67);
}

.hamb:hover div.haut {
    transform: translateX(5px);
}

.hamb:hover div.mid {
    transform: translateX(-5px);
}

.hamb:hover div.bas {
    transform: translateX(5px);
}

/**************選單開關新版特效結尾css*/

  /********選單overlay**************/
  #overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 1
  cursor: pointer;
}
  /***********子選單特效************/
  .menu ul li:hover > ul li{
  opacity: 0;
    animation: fadeIn 0.15s ease-in both;
}
.menu ul li:hover > ul li:nth-child(1) {
    animation-delay: 0.3s;
}

.menu ul li:hover > ul li:nth-child(2) {
    animation-delay: 0.35s;
}
.menu ul li:hover > ul li:nth-child(3) {
    animation-delay: 0.4s;
}
.menu ul li:hover > ul li:nth-child(4) {
    animation-delay: 0.45s;
}
.menu ul li:hover > ul li:nth-child(5) {
    animation-delay: 0.5s;
}
.menu ul li:hover > ul li:nth-child(6) {
    animation-delay: 0.55s;
}
  .menu ul li:hover > ul li:nth-child(7) {
    animation-delay: 0.6s;
}
  .menu ul li:hover > ul li:nth-child(8) {
    animation-delay: 0.65s;
}
  .menu ul li:hover > ul li:nth-child(9) {
    animation-delay: 0.7s;
}
  .menu ul li:hover > ul li:nth-child(10) {
    animation-delay: 0.75s;
}
  .menu ul li:hover > ul li:nth-child(11) {
    animation-delay: 0.8s;
}
  .menu ul li:hover > ul li:nth-child(12) {
    animation-delay: 0.85s;
}
  .menu ul li:hover > ul li:nth-child(13) {
    animation-delay: 0.9s;
}
  .menu ul li:hover > ul li:nth-child(14) {
    animation-delay: 0.95s;
}
    .menu ul li:hover > ul li:nth-child(15) {
    animation-delay: 1s;
}
    .menu ul li:hover > ul li:nth-child(16) {
    animation-delay: 1.05s;
}
    .menu ul li:hover > ul li:nth-child(17) {
    animation-delay: 1.1s;
}
    .menu ul li:hover > ul li:nth-child(18) {
    animation-delay: 1.15s;
}
    .menu ul li:hover > ul li:nth-child(19) {
    animation-delay: 1.2s;
}
    .menu ul li:hover > ul li:nth-child(20) {
    animation-delay: 1.25s;
}
    .menu ul li:hover > ul li:nth-child(21) {
    animation-delay: 1.3s;
}
      .menu ul li:hover > ul li:nth-child(22) {
    animation-delay: 1.35s;
}
      .menu ul li:hover > ul li:nth-child(23) {
    animation-delay: 1.4s;
}
      .menu ul li:hover > ul li:nth-child(24) {
    animation-delay: 1.45s;
}
      .menu ul li:hover > ul li:nth-child(25) {
    animation-delay: 1.5s;
}
      .menu ul li:hover > ul li:nth-child(26) {
    animation-delay: 1.55s;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate3d(0, -20%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
  /************選單**************/
  html, body {
    height:100%;
    margin:0;
  }
  #allnav{
  font-size: 18px;
  line-height: 36px;
  padding: 0;
  margin: 0;
  }
  /*開關*/
  .menu .closebtn {
  position: absolute;
  top: 20px;
  left:135px;
  font-size: 36px;
  margin-left: 0px;
  display: block;
  border: 3px solid transparent;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.5s ease-out;

}
 @media (min-width:678px) {
   .menu .closebtn:hover{
     background-color:rgba(255,255,255,0);
     transform: scale(1) rotateZ(90deg);
     position:absolute;
    top:20px;
    left:135px;

  }
 }
.menu {
  overflow-x:hidden;
  overflow-y:hidden;
  position: fixed;
    top: 0;
  left: -40px;
  z-index: 2;
  height: 100%;
  width: 0px;
  transition: 0.5s;
}

.parent-menu {
  background-color: white;
  min-width: 390px;
  float: left;
  height: 100%;
  overflow-x:hidden;
  overflow-y:hidden;
}

.menu ul {
  list-style-type: none;
  padding:120px 0 0 0;
  overflow-y:auto;
  }


.menu ul li a {
  padding: 20px 15px;
  display: block;
  color: black;
  text-decoration: none;
  text-align:center;
  font-size:1.250rem;
  line-height: 0.909rem;
  font-family:Arial;
  font-weight:400px;

}
/*********新增hover停留, .dropdown:hover值入li class="dropdown"********/
.menu ul li a:hover, .dropdown:hover {
  background-color: #f2f2f2;

}

.menu ul li:hover > ul {
  left: 390px;
  -webkit-transition: left 200ms ease-in;
  -moz-transition: left 300ms ease-in;
  -ms-transition: left 300ms ease-in;
  transition: left 300ms ease-in;

}

.menu ul li > ul {
  position: absolute;
  background-color: #f2f2f2;
  top: 0;
  left: -200px;
  min-width: 250px;
  z-index: -1;
  height: 100%;
  -webkit-transition: left 200ms ease-in;
  -moz-transition: left 300ms ease-in;
  -ms-transition: left 300ms ease-in;
  transition: left 300ms ease-in;

}

.menu ul li > ul li a:hover {
  background-color: #2e2e2e;

}
.menu ul li b {
  padding: 10px 15px;
  display: block;
  color: black;
  text-decoration: none;
    font-size: 0.9375rem;
  line-height: 20px;
  transition: left 2s ease-in;
  font-weight:normal;
  transition: all 0.1s ease-in;

}

.menu ul li b:hover {
  background-color: f2f2f2;
  color: #787878;
  padding: 10px 20px;

}
  .menu ul li c {
    font-size: 15px;
    line-height: 30px;
    display: block;
    padding: 0px 20px;
    transition: all 0.1s ease-in;
  }
  .menu ul li c:hover {
  background-color: f2f2f2;
  color: #787878;
  padding: 0 0 0 25px;

}
.menu ul li e {
  padding: 10px 15px;
  line-height: 25px;
  display: block;
  color: black;
  text-decoration: none;
  text-align:center;
  font-size:0.9375rem;
  margin:0 0 0 -15px;
  transition: all 0.1s ease-in;

}

.menu ul li e:hover {
  background-color:f2f2f2 ;
   color: #787878;
  padding: 10px 15px 10px 20px;
}

  @media (max-width:678px) {

  .parent-menu {
      min-width: 200px;
  }
  .menu ul li:hover > ul {
  left: 200px;
}
.menu ul {
    padding: 80px 0 0 0;}
    .menu ul li b{
    font-size: 0.86rem;
    }
    .menu ul li c {
    font-size: 14px;}
    .menu ul li a {
    font-size: 1.20rem;
    line-height: 0.8rem;
    text-align: left;
        padding: 20px 0px 20px 50px;
    }
    .menu ul li e {
        padding: 10px 0px 10px 69px;
        text-align: left;

    }
    .menu ul li e:hover {
        padding: 10px 0px 10px 71px;
    }
    .menu .closebtn {

        left: -5px;
}
.menu ul li > ul {
    min-width: 300px;}

}
</style>
<body >
<!--overlay-->  
<div id="overlay" onclick="off()"></div>
<div id="allnav" >
<div id="main">

    <!--選單開關舊版保留
  <span style="font-size:30px;cursor:pointer" onclick="openNav();on()">&#9776; open</span>　-->

    <!--選單開關新版特效--> 
 <div class="hamb" onclick="openNav();on()">
 <div class="icon haut"></div>
 <div class="icon mid"></div>
 <div class="icon bas"></div>
 </div>
  <!--選單開關新版特效結尾-->
</div>
<nav id ="mynav" class="menu" >
  <ul class="parent-menu" >
     <li> <a href="javascript:void(0)" class="closebtn" onclick="closeNav();off()">&times;</a></li>
    <li class="dropdown"><a href="#">工商手冊</a>
      <ul>
        <li><b style="font-weight:900; cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[50]/';">16K系列(280x210mm)</b></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[51]/';">基本款</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[52]';">三折款</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[53]';">扣帶款</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[54]';">拉鍊款</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[37]';">鬆緊帶款</c></li>        
        <li><b style="font-weight:900; cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[56]/';">25K系列(220x170mm)</b></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[57]/';">基本款</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[58]/';">三折款</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[59]/';">扣帶款</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[60]/';">拉鍊款</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[61]';">鬆緊帶款</c></li>        
        <li><b style="font-weight:900; cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[62]/';">32K系列(180x130mm)</b></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[63]/';">基本款</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[64]/';">三折款</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[65]/';">扣帶款</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[66]/';">拉鍊款</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[67]';">鬆緊帶款</c></li>        
        <li><b style="font-weight:900; cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[68]/';">48K系列(180x90mm)</b></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[69]/';">基本款</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[70]/';">三折款</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[71]/';">扣帶款</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[72]/';">拉鍊款</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[73]';">鬆緊帶款</c></li>        
                <br>
        <li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[48]';">探索所有系列</b></li>
      </ul>
    </li>
    <li class="dropdown"><a href="#">皮件製品</a>
      <ul>
        <li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%E7%9A%AE%E4%BB%B6%E8%A3%BD%E5%93%81/?filters=product_cat[75]/';">交屋/交車手冊</b></li>
        <li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%E7%9A%AE%E4%BB%B6%E8%A3%BD%E5%93%81/?filters=product_cat[76]/';">行李吊牌/護照夾</b></li>
        <li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%E7%9A%AE%E4%BB%B6%E8%A3%BD%E5%93%81/?filters=product_cat[77]/';">名片-信用卡-證件套</b></li>
        <li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%E7%9A%AE%E4%BB%B6%E8%A3%BD%E5%93%81/?filters=product_cat[78]/';">車控套/鑰匙包</b></li>
        <li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%E7%9A%AE%E4%BB%B6%E8%A3%BD%E5%93%81/?filters=product_cat[79]/';">長短夾/手拿/零錢包</b></li>
        <li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%E7%9A%AE%E4%BB%B6%E8%A3%BD%E5%93%81/?filters=product_cat[81]/';">水洗牛皮紙</b></li>
        <br>
        <li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%9a%ae%e4%bb%b6%e8%a3%bd%e5%93%81/';">探索所有系列</b></li>
      </ul></li>
    <li class="dropdown"><a href="#">環保提袋</a>
      <ul>
        <li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%92%b0%e4%bf%9d%e6%8f%90%e8%a2%8b/?filters=product_cat[83]/';">立體袋</b></li>
        <li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%92%b0%e4%bf%9d%e6%8f%90%e8%a2%8b/?filters=product_cat[84/]';">T型袋</b></li>
        <li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%92%b0%e4%bf%9d%e6%8f%90%e8%a2%8b/?filters=product_cat[85]/';">平面袋</b></li>
        <li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%92%b0%e4%bf%9d%e6%8f%90%e8%a2%8b/?filters=product_cat[86]/';">打孔袋</b></li>
        <li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%92%b0%e4%bf%9d%e6%8f%90%e8%a2%8b/?filters=product_cat[88]/';">束口袋</b></li>
        <li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%92%b0%e4%bf%9d%e6%8f%90%e8%a2%8b/?filters=product_cat[89]/';">防塵袋</b></li>
        <li><b href="#">網袋</b></li>
        <li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%92%b0%e4%bf%9d%e6%8f%90%e8%a2%8b/?filters=product_cat[91]/';">摺疊收納袋</b></li>
        <li><b href="#">毛氈布袋</b></li>
        <li><b href="#">飲料提袋</b></li>
                <br>
        <li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%E7%92%B0%E4%BF%9D%E6%8F%90%E8%A2%8B/';">探索所有系列</b></li>
        </ul></li>
    <li class="dropdown"><a href="#">紙品印刷</a>
      <ul>
        <li><b style="font-weight:900; cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/%e9%86%ab%e7%99%82%e9%99%a2%e6%89%80-%e5%90%8d%e7%89%87%e7%89%88%e5%9e%8b/';">醫療院所-名片版型</b></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/%e9%86%ab%e7%99%82%e9%99%a2%e6%89%80-%e5%90%8d%e7%89%87%e7%89%88%e5%9e%8b/?filters=product_cat[96]/';">小兒科</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/%e9%86%ab%e7%99%82%e9%99%a2%e6%89%80-%e5%90%8d%e7%89%87%e7%89%88%e5%9e%8b/?filters=product_cat[97]/';">中醫</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/%e9%86%ab%e7%99%82%e9%99%a2%e6%89%80-%e5%90%8d%e7%89%87%e7%89%88%e5%9e%8b/?filters=product_cat[98]/';">牙科</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/%e9%86%ab%e7%99%82%e9%99%a2%e6%89%80-%e5%90%8d%e7%89%87%e7%89%88%e5%9e%8b/?filters=product_cat[99]/';">外科</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/%e9%86%ab%e7%99%82%e9%99%a2%e6%89%80-%e5%90%8d%e7%89%87%e7%89%88%e5%9e%8b/?filters=product_cat[100]/';">耳鼻喉科</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/%e9%86%ab%e7%99%82%e9%99%a2%e6%89%80-%e5%90%8d%e7%89%87%e7%89%88%e5%9e%8b/?filters=product_cat[101]/';">婦產科</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/%e9%86%ab%e7%99%82%e9%99%a2%e6%89%80-%e5%90%8d%e7%89%87%e7%89%88%e5%9e%8b/?filters=product_cat[102]/';">眼科</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/%e9%86%ab%e7%99%82%e9%99%a2%e6%89%80-%e5%90%8d%e7%89%87%e7%89%88%e5%9e%8b/?filters=product_cat[103]/';">復健科</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/%e9%86%ab%e7%99%82%e9%99%a2%e6%89%80-%e5%90%8d%e7%89%87%e7%89%88%e5%9e%8b/?filters=product_cat[104]/';">診所醫院</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/%e9%86%ab%e7%99%82%e9%99%a2%e6%89%80-%e5%90%8d%e7%89%87%e7%89%88%e5%9e%8b/?filters=product_cat[105]/';">藥局</c></li>
        <li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/%e9%86%ab%e7%99%82%e9%99%a2%e6%89%80-%e5%90%8d%e7%89%87%e7%89%88%e5%9e%8b/?filters=product_cat[106]/';">醫美</c></li>
                        <br>
        <li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/';">探索所有系列</b></li>
      </ul>
    </li>
    <li class="dropdown"><a href="#">產品資訊</a>
      <ul>
        <li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/leather/';">皮紋介紹</b></li>
         <li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/applications/';">應用實例</b></li>
        <li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/custom/';">客製化流程</b></li>
        <li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/knowledge/';">知識小百科</b></li>
      </ul>
    </li>
    <li class="dropdown"><a href="#">關於贊洋</a>
      <ul>
        <li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/brandspirit/';">品牌精神</b></li>
        <li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/about-us/';">公司介紹</b></li>
        <li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/history/';">歷史紀事</b></li>
        <li><b href="#">item</b></li>
      </ul>


    </li>
    <br>
        <li><e style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/request-quote/';">如何詢價</e>
    </li>
        <li><e style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/contact-us/';">聯絡客服</e>
    </li>

  </ul>
</nav>
</div>

<script>
/*選單開關*/
function openNav() {
  document.getElementById("mynav").style.width = "660px";
 }
function closeNav() {
  document.getElementById("mynav").style.width = "0";
}
  /*overlay開關*/
  function on() {
  document.getElementById("overlay").style.display = "block";
}

function off() {
  document.getElementById("overlay").style.display = "none";
  document.getElementById("mynav").style.width = "0";
}
</script>