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?
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.