IOS -webkit-overflow-scrolling scrolls on wrong axis, or not at all

Question

I'm building a mobile app for IOS, with html5. I'm using "-webkit-overflow-scrolling: touch" to get the native inertia scrolling, but it's very buggy. I've solved the issues with content not rendering until the scrolling stops, but one persistent bug is this:

When I try to scroll up and down, nothing happens, but when I try to scroll horizontally, the content scrolls vertically (90 degrees off axis). If I navigate around my app and come back to the page, it will sometimes be fixed. Also, sometimes it won't scroll at all, despite being full of content.

From what I've googled, the consensus seems to be that Apple is aware of this bug, and has no intention of fixing it any time soon. Has anyone found a solution to get -webkit-overflow-scrolling to work correctly?

Answer 1

I also have struggled with this bug for months. The best characterization that I've found is:

https://bugs.webkit.org/show_bug.cgi?id=87391

which says that it happens when the page has an iFrame and the contents are set from Javascript. My current workaround in The Graphics Codex version 1.6 is to use iScroll4 to explicitly scroll the page rather than using touch scrolling. Because Javascript is single-threaded, this can be slow if you're also performing animations or background loading content.

Answer 2

I encountered the same problem: a node using -webkit-overflow-scrolling: scroll that would intermittently scroll up/down only with a left/right scroll gesture.

Here's what I found to be possible causes:

• iframe present on the page anywhere, visible or otherwise (source)
• visibility: hidden applied to any parent of the scrollable node (source)

However, none of these situations were present in my web app. I had a scrollable <ul> inside of a pure CSS modal dialog that I wrote which used a clever trick to add a transparent underlay -- an ::after pseudo-element with position: fixed.

When I removed the position: fixed from the pseudo-element, the problem went away! Of course, this made my clever trick useless, but it was interesting to learn that this bug could be triggered by this situation.

Device: iOS 5.1.1 on 2012 iPad 3 (retina)

Offending code:

/* Underlay */
.dialog::after {
    z-index: -1;
    position: fixed; /* <--- This was the problem! */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-color: rgba(0,0,0,0.4);

    content: "";
}

tl;dr: if containing elements have a fixed position pseudo-element, removing it could fix your scrolling problem.