iOS 10 Safari fixed menu button unclickable after scrolling - ios

Question

I'm having an issue with a fixed menu on iOS 10 Safari where the button sometimes becomes unclickable after scrolling. From debugging, the best I can tell is that the menu button's position isn't always updated properly after the scroll.
position bug screenshot
Sometimes it takes several clicks for the button to become responsive, and occasionally it forces the screen to scroll or zoom before the menu will open.
The issue only seems to be occurring on iPhone 7 using Safari, from what I've seen, but it may be present somewhere else I haven't found yet.
I've created a simplified version of the page with the issue here: 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">
<span>Menu</span>
<nav class="menu">
<div class="menu-ul">
<ul>
<li class="menu-item">About</li>
<li class="menu-item">Something</li>
<li class="menu-item">Something Else</li>
</ul>
</div>
</nav>
</header>