Bug 165154 - -webkit-overflow-scrolling:touch in certain HTML structure causes erroneous rubberbanding
Summary: -webkit-overflow-scrolling:touch in certain HTML structure causes erroneous r...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: DOM (show other bugs)
Version: Other
Hardware: iPhone / iPad iOS 9.3
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2016-11-29 13:39 PST by alan.delong
Modified: 2019-02-06 09:18 PST (History)
2 users (show)

See Also:


Attachments
POC for iPad erroneous rubberbanding (1.92 KB, text/html)
2016-11-29 13:39 PST, alan.delong
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description alan.delong 2016-11-29 13:39:52 PST
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
Comment 1 Radar WebKit Bug Importer 2017-06-02 11:51:20 PDT
<rdar://problem/32540635>
Comment 2 Lucas Forschler 2019-02-06 09:18:54 PST
Mass move bugs into the DOM component.