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

                
                

            
);
}