117059 2013-05-30 17:29:30 -0700 iOS touch scrolling doesn't take occluding elements into account 2019-02-06 09:18:37 -0800 1 1 1 Unclassified WebKit DOM Safari 9 iPhone / iPad iOS 9.3 NEW HasReduction, InRadar P2 Normal --- 1 rbyers webkit-unassigned dev+webkit dino eoconnor jonlee simon.fraser tahoon webkit-bug-importer webkit oldest_to_newest 895746 0 rbyers 2013-05-30 17:29:30 -0700 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 896616 1 eoconnor 2013-06-03 14:24:11 -0700 <rdar://problem/9671514> 1134620 2 rbyers 2015-10-19 10:55:43 -0700 Still reproduces on iOS 9 1478124 3 354696 tahoon 2018-11-13 13:33:01 -0800 Created attachment 354696 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. 1478131 4 tahoon 2018-11-13 13:46:06 -0800 Still reproduces easily in iOS 12. Tested on iOS 9, 10, and 11 also. See attachment 354696. 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. 1503207 5 lforschler 2019-02-06 09:18:37 -0800 Mass move bugs into the DOM component. 354696 2018-11-13 13:33:01 -0800 2018-11-13 13:33:01 -0800 Repro case: simple overlay using absolute position and minimal CSS rules Repro 117059 - swiping on layer scrolls contents underneath.html text/html 1334 tahoon PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCiAgPGhlYWQ+DQogICAgPHRpdGxlPkJ1ZyAxMTcwNTk8 L3RpdGxlPg0KICA8L2hlYWQ+DQogIDxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0 aD1kZXZpY2Utd2lkdGgiPg0KICA8c3R5bGU+DQogICAgLmNvbnRlbnQgew0KICAgICAgICBvdmVy Zmxvdzogc2Nyb2xsOw0KICAgICAgICAtd2Via2l0LW92ZXJmbG93LXNjcm9sbGluZzogdG91Y2g7 DQogICAgICAgIGhlaWdodDogMjUwcHg7DQogICAgICAgIHdpZHRoOiAyNTBweDsNCiAgICB9DQoN CiAgICAjb3ZlcmxheXsNCiAgICAgICAgcG9zaXRpb246IGFic29sdXRlOw0KICAgICAgICB3aWR0 aDogMTAwcHg7DQogICAgICAgIGhlaWdodDogMTgwcHg7DQogICAgICAgIHRvcDogMDsNCiAgICAg ICAgbGVmdDogMDsNCiAgICAgICAgcGFkZGluZzogMWVtOw0KICAgICAgICBib3JkZXI6IDJweCBz b2xpZCBibGFjazsNCiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogeWVsbG93Ow0KICAgIH0NCg0K ICAgIC5jb250ZW50ID4gZGl2IHsNCiAgICAgICAgbWFyZ2luOiAzMHB4IDA7DQogICAgfQ0KICA8 L3N0eWxlPg0KPC9oZWFkPg0KPGJvZHk+DQogIDxkaXY+DQogICAgPGRpdiBjbGFzcz0nY29udGVu dCc+DQogICAgICA8ZGl2PnRoZXNlIGFyZSB0aGUgY29udGVudHMgYXQgdGhlIGJvdHRvbTwvZGl2 Pg0KICAgICAgPGRpdj50aGVzZSBhcmUgdGhlIGNvbnRlbnRzIGF0IHRoZSBib3R0b208L2Rpdj4N CiAgICAgIDxkaXY+dGhlc2UgYXJlIHRoZSBjb250ZW50cyBhdCB0aGUgYm90dG9tPC9kaXY+DQog ICAgICA8ZGl2PnRoZXNlIGFyZSB0aGUgY29udGVudHMgYXQgdGhlIGJvdHRvbTwvZGl2Pg0KICAg ICAgPGRpdj50aGVzZSBhcmUgdGhlIGNvbnRlbnRzIGF0IHRoZSBib3R0b208L2Rpdj4NCiAgICAg IDxkaXY+dGhlc2UgYXJlIHRoZSBjb250ZW50cyBhdCB0aGUgYm90dG9tPC9kaXY+DQogICAgICA8 ZGl2PnRoZXNlIGFyZSB0aGUgY29udGVudHMgYXQgdGhlIGJvdHRvbTwvZGl2Pg0KICAgICAgPGRp dj50aGVzZSBhcmUgdGhlIGNvbnRlbnRzIGF0IHRoZSBib3R0b208L2Rpdj4NCiAgICAgIDxkaXY+ dGhlc2UgYXJlIHRoZSBjb250ZW50cyBhdCB0aGUgYm90dG9tPC9kaXY+DQogICAgICA8ZGl2PnRo ZXNlIGFyZSB0aGUgY29udGVudHMgYXQgdGhlIGJvdHRvbTwvZGl2Pg0KICAgIDwvZGl2Pg0KICAg IDxkaXYgaWQ9J292ZXJsYXknPg0KICAgICAgU2Nyb2xsaW5nIGluIHRoaXMgeWVsbG93IHJlY3Rh bmdsZSBzaG91bGQgbm90IHNjcm9sbCBjb250ZW50cyBiZWhpbmQNCiAgICA8L2Rpdj4NCiAgPC9k aXY+DQo8L2JvZHk+DQo8L2h0bWw+DQo=