Ios8 Safari -webkit-overflow-scrolling: Touch; Issue

So we are building this web app for a client which worked perfectly on iOS7 in Safari. But when we checked the app out in iOS8 it had a some huge bugs. If a user opens the sideba

Solution 1:

I'm having this same issue! So far I can't find a true solution, but there is a less-than-ideal workaround:

Assuming #container has the -webkit-overflow-scrolling: touch property set, this jQuery should help you out:

$('#container').css('-webkit-overflow-scrolling','auto');

Or for javascript (untested):

document.getElementById('container').style.webkitOverflowScrolling = 'auto';

This will disable the smooth roulette-style scrolling on the page. So it's not ideal, but your page should scroll correctly now.

Edit:

Some further research led to our discovery of a more hacky way to resolve this while keeping the smooth touch scrolling working. Assuming you have -webkit-overflow-scrolling: touch somewhere in the css, you can "toggle" it within your JS. I'm not sure what you have that shows/hides the menu, but hopefully you can utilize this.

functiontoggleMenu(){
    $('#container').css('-webkit-overflow-scrolling','auto');

    //...Existing codesetTimeout(function() {
        $('#container').css('-webkit-overflow-scrolling','touch');
    },500);
}

This didn't work for me without the setTimeout. Hope this can help you or someone else out.

Solution 2:

I had this problems in iOS8 that all my buttons binded to click event are not working properly. In general we will have 300 ms delayed but at some points i will need to press more than couple of times to get it triggered.

So i also found this solution which works on mine. Adding touchend with click.

button.on('click touchend', function(event) {
  // this fires twice on touch devices
});

You can see the forum they discussed here.

JavaScript touchend versus click dilemma

I hope this help.

Solution 3:

Is your sidebar animated with CSS animations by any chance?

I had the same bug in a Cordova web app. After some experimenting, I found that the problem was caused by parent <div> (the sidebar) that was being animated through css animations and had the property animation-fill-mode: forwards;

Removing this property solved the issue and restored the expected -webkit-overflow-scrolling: touch behavior

Solution 4:

My answer is:

$('#container').css('-webkit-overflow-scrolling','auto');

Previous solution didn't work:

document.getElementById('container').style.webkitOverflowScrolling = 'auto';