Bug 165154 – -webkit-overflow-scrolling:touch in certain HTML structure causes erroneous rubberbanding

• Component: Scrolling
• Status: NEW

Created attachment 295634 [details]
POC for iPad erroneous rubberbanding

Take the HTML from this codepen, save it as its own page (or grab the attached HTML file), and open it on an iPad in mobile Safari: http://codepen.io/anon/pen/oYoXYv

So basically we have 4 absolutely positioned divs for showing where you are on the page, inside a very tall div (.page-scroll), which is inside a relatively positioned div with overflow-y: scroll and -webkit-overflow-scrolling: touch (.page-container). The other parent divs (page-viewport and viewport) are there to ensure a consistent look across devices.

On every other device we've tried, swiping to scroll scrolls the page-scroll div inside the page-container div as expected. However, on iPad, we are seeing non-deterministic behavior. If you swipe quickly, the page scrolls normally, but if you swipe slowly, the page will sometimes rubberband. It's as if the touchstart event is getting sent to one of the parent divs, and so the iPad thinks it is at the bottom or top of the page.

However, if -webkit-overflow-scrolling: touch is removed from the .page-container div, the problem disappears. But you lose momentum scrolling. I should also note that if this markup is loaded onto a page via an iframe, the problem goes away, but that is not really an option for us (because reasons).

This was asked about on StackOverflow but was unresolved, so we're reporting it here. http://stackoverflow.com/questions/37999637/ipad-sometimes-rubberbands-with-webkit-overflow-scrolling-touch 

This may be related to one of these reported bugs, however without solving the bug it is hard to say:
https://bugs.webkit.org/show_bug.cgi?id=106918
https://bugs.webkit.org/show_bug.cgi?id=117059

[Radar WebKit Bug Importer]

<rdar://problem/32540635>

[Lucas Forschler]

Mass move bugs into the DOM component.