Bug 117059 – iOS touch scrolling doesn't take occluding elements into account

• Component: DOM
• Status: NEW

[Rick Byers]

If you have a div using -webkit-overflow-scrolling: touch, then any touches in the region of that div will cause it to scroll, even if the touches are actually landing on another element that's on top of the scrolling element.  Repro here: http://jsbin.com/ezovup/2 - touching the header shouldn't scroll the underlying list (eg. it might have buttons you want to tap).

Now I don't know anything about how mobile Safari implements this (since their touch support is all in a fork of WebKit), but I assume it's similar to Chrome (except that we no longer rely on a special CSS property, accelerated touch scrolling is always enabled).  I assume that -webkit-overflow-scrolling: touch means that scrolling is handled off the main WebKit thread, and since only the main thread has access to the DOM this must rely on sending a list of 'fast scrollable regions' from the main thread.  So the bug is that the thread doing the scrolling knows about the rectangle for fast scrolling, but not about the rectangle of the div that's occluding it.

[discussion on G+ here: https://plus.google.com/115788095648461403871/posts/UXwZJbNtWGj]

Tested on iOS 6.1.3
Works properly on Chrome Android and ChromeOS

[Theresa O'Connor]

<rdar://problem/9671514>

[Rick Byers]

Still reproduces on iOS 9

Created attachment 354696 [details]
Repro case: simple overlay using absolute position and minimal CSS rules

Swiping on a position:absolute overlay causes the position:absolute element below to scroll.

Still reproduces easily in iOS 12. Tested on iOS 9, 10, and 11 also.

See attachment 354696 [details]. Swiping vertically anywhere on the layer above will scroll the layer below if the latter has -webkit-overflow-scrolling:touch. This also reproduces if the bottom layer has position:static.

Does not repro if the layer below has -webkit-overflow-scrolling:auto.

If the top layer is scrollable, then swiping the top layer will correctly scroll that layer only…until the start or end of the scrolling box is reached. Attempting to scroll past it will incorrectly scroll the layer below.

[Lucas Forschler]

Mass move bugs into the DOM component.