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?

Huffish

Also having the same issue. No resolution found yet. – Sumbawa

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.

Mcclung

I also ended up using iScroll4. It's not ideal but it did manage to emulate iOS scrolling better than... iOS. A tip: I also ended up making the contents of the scrolling section hardware rendered by setting transform3d styles to 0,0,0. That way they get prerendered and you don't have jittery scrolling if you have a lot of content. – Huffish

I'm having this same issue with scrolling in jQuery Dialogs on iOS. Plugins aren't a great fix, and still behave a little odd. – Diabolic

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.

Goodwife

Answer 3

I know that the issue is kind of old, but I had to make my website work on iOS 5. Unfortunately i couldn't remove nor replace the iframe. I've noticed that the presence of iframe caused the problem only if it was rendered before the element which was ment to scroll smoothly. Appending iframe to the document later (after the element with -webkit-overflow-scrolling: touch) fixed the problem :)

Cestoid