Bug 117059 - iOS touch scrolling doesn't take occluding elements into account
Summary: iOS touch scrolling doesn't take occluding elements into account
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: DOM (show other bugs)
Version: Safari 9
Hardware: iPhone / iPad iOS 9.3
: P2 Normal
Assignee: Nobody
URL:
Keywords: HasReduction, InRadar
Depends on:
Blocks:
 
Reported: 2013-05-30 17:29 PDT by Rick Byers
Modified: 2019-02-06 09:18 PST (History)
8 users (show)

See Also:


Attachments
Repro case: simple overlay using absolute position and minimal CSS rules (1.30 KB, text/html)
2018-11-13 13:33 PST, tahoon
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Rick Byers 2013-05-30 17:29:30 PDT
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
Comment 1 Theresa O'Connor 2013-06-03 14:24:11 PDT
<rdar://problem/9671514>
Comment 2 Rick Byers 2015-10-19 10:55:43 PDT
Still reproduces on iOS 9
Comment 3 tahoon 2018-11-13 13:33:01 PST
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.
Comment 4 tahoon 2018-11-13 13:46:06 PST
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.
Comment 5 Lucas Forschler 2019-02-06 09:18:37 PST
Mass move bugs into the DOM component.