滚动后，iOS 10 Safari固定菜单按钮无法点击

Question

我在iOS 10 Safari上遇到固定菜单问题，滚动后按钮有时会变得无法点击。从调试开始，我能说的最好的是滚动后菜单按钮的位置始终没有正确更新。 position bug screenshot

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

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

我已在此处创建了该页面的简化版本：http://meghandove.com/test.html

＆＃13;

＆＃13;

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');
    }
  });
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;