-webkit-overflow-scrolling: touch; breaks in Apple

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 IOS8, -webkit-overflow-scrolling: touch stops you being able to scroll whatsoever, and the only way I have been able to fix this so far is by removing -webkit-overflow-scrolling: touch which leaves the standard sticky scrolling. Please help!

Here is an example of one of the standard classes that works in iOS5, 6, and 7:

.dashboardScroll {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; /*MAKES OVERFLOWN OBJECTS HAVE INERTIA SCROLLING*/
    -webkit-transform: translateZ(0px); /*HELPS THE ABOVE WORK IN IOS5*/
} 

Answer 1

Preventing touch events from surrounding elements bubbling up the DOM is another potential solution, you may notice that scrolling stops when surrounding DIV elements receive the touch or drag events. We had this particular issue in a menu that needed to scroll smoothly. Turning off those events helped stop the "sticking" of the scroll able element.

$html.bind('touchmove', scrollLock );

var scrollLock = function(e) {
        if( $body.hasClass('menu-open') ){
                e.stopPropagation();
                e.preventDefault();
        }
};

$html.unbind('touchmove', scrollLock );

Answer 2

I had the same problem in a Cordova web app. For me, the problem was that I had a parent <div> that was animated and had the property animation-fill-mode: forwards;

Removing this property solved the problem and fixed the broken overflow-scrolling.

Answer 3

I had this problem while using the angular bootstrap modal. I fixed it by creating my own stylesheet and removing the fixed width and margin in the media queries.

ORIGINAL:

  .modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
  }

@media (min-width: 768px) {
  .modal-dialog {
      width: 600px;
      margin: 30px auto;
  }
    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
    .modal-sm {
        width: 300px;
    }
}
@media (min-width: 992px) {
    .modal-lg {
        width: 900px;
    }
}

CHANGES:

.modal-dialog {
    margin: 0px;
    margin-top: 30px;
    margin-left: 5%;
    margin-right: 5%;
}

@media (min-width: 768px) {
    .modal-dialog {
        width: auto;
        margin-left: 10%;
        margin-right: 10%;
    }
    .modal-content {
       -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
}

@media (min-width: 992px) {
    .modal-dialog {
        width: auto;
        margin-left: 15%;
        margin-right: 15%;
    }  
}

Answer 4

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 5

I've been having some trouble with it too but in a slightly different scenario.

I do have my divs with inertia without any problems.

I have a simple JSFiddle where you can have a look.

https://jsfiddle.net/SergioM/57f2da87/17/

.scrollable {
    width:100%;
    height:200px;
    -webkit-overflow-scrolling:touch;
    overflow:scroll;
}

Hope it helps.

Answer 6

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.