-webkit-overflow-scrolling: touch; breaks in Apple's iOS8

Question

I\'m working on a web app that uses -webkit-overflow-scrolling:touch in several places to give the overflown divs inertia scrolling.

Since updating to I

Answer 1

I had this problem and found a solution. The solution is that, you have to put your content into two containers for ex:(.dashboardScroll > .dashboardScroll-inner) and give the inner container ".dashboardScroll-inner" 1px more height than the parent ".dashboardScroll" throug this css3 property

.dashboardScroll-inner { height: calc(100% + 1px);}

check out this :

http://patrickmuff.ch/blog/2014/10/01/how-we-fixed-the-webkit-overflow-scrolling-touch-bug-on-ios/

or otherwise if you can't add another container use this:

.dashboardScroll:after { height: calc(100% + 1px);}

Answer 2

I used the last method in mohammed Suleiman's answer (.dashboardScroll:after { height: calc(100% + 1px);}) but the result was that I had a 100% + 1px empty space below my content. I fixed this by changing height back to 1px after 500ms. Ugly, but it works.

This was a react.js app so my code was like this:

componentDidUpdate() {
    if (window.navigator.standalone && /* test for iOS */) {
        var self = this;
        setTimeout(function(){
            self.refs.style.innerHTML = "#content::after { height: 1px}";
        }, 500);
    }
}

and render:

render() {
    var style = '';
    if (window.navigator.standalone && /* test for iOS */) {
        style = "#content::after { height: calc(100% + 1px)}";
    }
    return (<div>
                <style type="text/css" ref="style">
                    {style}
                </style>
                <div id="content"></div>
            </div>);
}

Answer 3

I was not able to solve the problem with previous answers. So after a few hours a gave the iScroll library a try, iScroll. I know including an extra library (and quite sizable) to add scrolling for just iOS is not great but this is what worked for me. Just follow the readme, the lite version suffices.

Disadvantages:

• Scrolling on Android now looks like crap, it is not native anymore.
• It is not possible to refresh the page by scrolling anymore
• You need to apply another fix for Android : Clicks not working

I am unsure if I will use it, but if you are in need give it a go.

Answer 4

i fixed my issue by adding some inline css to the scrollable div with jquery.. adding the css to the div after the dom is loaded makes scrolling work.

$('.lightbox__scrollable-content').css('overflow-y', 'scroll');