ios - iOS 10 Safari 修复了滚动后无法点击的菜单按钮

Question

我在 iOS 10 Safari 上的固定菜单存在问题，其中按钮有时在滚动后变得无法点击。从调试中，我能说的最好的就是菜单按钮的位置在滚动后并不总是正确更新。 定位错误截图

有时需要多次单击按钮才能响应，有时它会在菜单打开之前强制屏幕滚动或缩放。

从我所见，这个问题似乎只发生在使用 Safari 的 iPhone 7 上，但它可能存在于我尚未找到的其他地方。

我在这里创建了一个带有问题的页面的简化版本：http: //meghandove.com/test.html

jQuery(document).ready(function() {
  jQuery('a.menu-trigger').click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    if (jQuery('.menu').hasClass('menu-open')) {
      jQuery('.menu').removeClass('menu-open');
      jQuery('.menu').addClass('menu-close');
    } else {
      jQuery('.menu').removeClass('menu-close');
      jQuery('.menu').addClass('menu-open');
    }
  });
});

body {
  padding-top: 60px;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #FFFFFF;
  transform: translate3d(0, 0, 0);
}

header .menu-trigger {
  padding: 20px;
  display: block;
  text-align: center;
}

.menu ul {
  height: 100%;
  background: #FFFFFF;
  margin: 0;
  padding: 30px 0 0;
  list-style: none;
  position: fixed;
  top: 50px;
  right: 0;
}

.menu ul li,
.menu ul li a {
  display: block;
}

.menu ul li {
  display: none;
  opacity: 0;
}

.menu.menu-open ul li {
  display: list-item;
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<header class="navbar">
  <a href="#" class="menu-trigger"><span>Menu</span></a>
  <nav class="menu">
    <div class="menu-ul">
      <ul>
        <li class="menu-item"><a href="/#about">About</a></li>
        <li class="menu-item"><a href="/#something">Something</a></li>
        <li class="menu-item"><a href="/#somethingelse">Something Else</a></li>
      </ul>
    </div>
  </nav>
</header>

标签： ioscssmenusafarifixed