Dealing with the same issue here! Still on the lookout for a solid fix, but there is a temporary workaround available:
If your #container has the
-webkit-overflow-scrolling: touch
property enabled, you can try using this snippet of jQuery:
$('#container').css('-webkit-overflow-scrolling','auto');
Alternatively, in JavaScript (not tested):
document.getElementById('container').style.webkitOverflowScrolling = 'auto';
By doing this, it will eliminate the smooth roulette-style scrolling effect on your page. It may not be perfect, but at least your page should scroll properly now.
Update:
After looking into it further, we found a more unconventional method to address the issue while retaining the smooth touch scrolling functionality. If you currently have
-webkit-overflow-scrolling: touch
defined in your CSS, you can "toggle" it using JavaScript. I'm not certain about your show/hide menu implementation, but hopefully, you can adapt this approach accordingly.
function toggleMenu(){
$('#container').css('-webkit-overflow-scrolling','auto');
//...Your existing code
setTimeout(function() {
$('#container').css('-webkit-overflow-scrolling','touch');
},500);
}
In my case, this solution only worked when including the setTimeout function. Hopefully, this insight proves helpful to you or others facing similar challenges.