iOS 10 Safari фиксированная кнопка меню, не нажимаемая после прокрутки

Question

У меня проблема с фиксированным меню в iOS 10 Safari, когда кнопка иногда становится неактивной после прокрутки. Из отладки лучшее, что я могу сказать, это то, что положение кнопки меню не всегда обновляется должным образом после прокрутки. скриншот ошибки позиции

Иногда требуется несколько щелчков мыши, чтобы кнопка стала отзывчивой, а иногда заставляет экран прокручиваться или масштабироваться, прежде чем откроется меню.

Кажется, что проблема возникает только на iPhone 7 с использованием Safari, из того, что я видел, но она может присутствовать в другом месте, которое я еще не нашел.

Я создал упрощенную версию страницы с проблемой здесь: 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>