iOS8 Safari -webkit-overflow-scrolling: touch; issue

Question

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 sidebar and closes it, content that is in a <section style="overlay-y: scroll;"></section> disappears ( the overlaid part ).
• Some buttons stopped working for any reason. ( <a href="">Lala</a> )

When we remove -webkit-overflow-scrolling: touch; from the container ( the div that holds all the content ) everything works flawlessly like it used to...

Any ideas on what it might be?

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

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

    //...Existing code

    setTimeout(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.