193191 2019-01-07 01:44:10 -0800 `-webkit-overflow-scrolling: touch` causes incorrect div rendering 2022-07-01 16:06:23 -0700 1 1 1 Unclassified WebKit CSS Safari 12 iPhone / iPad iOS 12 RESOLVED WORKSFORME P2 Normal --- 1 alberto webkit-unassigned alberto bfulgham simon.fraser zalan oldest_to_newest 1492219 0 358487 alberto 2019-01-07 01:44:10 -0800 Created attachment 358487 Test case that reproduces the bug See the test case attached. When `-webkit-overflow-scrolling: touch;` is set to the `right` CSS class, the red div covers the blue bar on iOS. If set to `-webkit-overflow-scrolling: auto;`, the blue bar covers the red div, which is the expected behaviour and consistent with Safari on desktop and every other browser. 1492371 1 simon.fraser 2019-01-07 13:44:38 -0800 -webkit-overflow-scrolling: touch; on a scrollable element creates CSS stacking context. 358487 2019-01-07 01:44:10 -0800 2019-01-07 01:44:10 -0800 Test case that reproduces the bug webkit-overflow-scrolling-bug.html text/html 1073 alberto PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICA8bWV0YSBjaGFyc2V0PSJVVEYtOCI+CiAg PHRpdGxlPkJ1ZyB3aXRoIC13ZWJraXQtb3ZlcmZsb3ctc2Nyb2xsaW5nOiB0b3VjaDwvdGl0bGU+ CiAgPHN0eWxlPgogICAgaHRtbCB7CiAgICAgIGhlaWdodDogMTAwJTsKICAgIH0KCiAgICBib2R5 IHsKICAgICAgbWFyZ2luOiAwOwogICAgICBkaXNwbGF5OiBmbGV4OwogICAgICBoZWlnaHQ6IDEw MCU7CiAgICB9CgogICAgLmxlZnQgewogICAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICAgIHRv cDogMDsKICAgICAgYm90dG9tOiAwOwogICAgICB3aWR0aDogMjAwcHg7CiAgICAgIGJhY2tncm91 bmQ6IHJlZDsKICAgIH0KCiAgICAucmlnaHQgewogICAgICAtd2Via2l0LW92ZXJmbG93LXNjcm9s bGluZzogdG91Y2g7CiAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7CiAgICAgIG1hcmdpbi1s ZWZ0OiAyMDBweDsKICAgICAgb3ZlcmZsb3c6IGF1dG87CiAgICAgIGhlaWdodDogMTAwJTsKICAg ICAgd2lkdGg6IDEwMCU7CiAgICB9CgogICAgLnJpZ2h0IHAgewogICAgICBtYXJnaW46IDIwMHB4 IDI1cHg7CiAgICB9CgogICAgLmJhciB7CiAgICAgIGJhY2tncm91bmQ6IGJsdWU7CiAgICAgIGNv bG9yOiB3aGl0ZTsKICAgICAgd2lkdGg6IGNhbGMoMTAwJSArIDIwMHB4KTsKICAgICAgaGVpZ2h0 OiAzMHB4OwogICAgICBib3R0b206IDA7CiAgICAgIG1hcmdpbi1sZWZ0OiAtMjAwcHg7CiAgICAg IHBvc2l0aW9uOiBmaXhlZDsKICAgIH0KICA8L3N0eWxlPgo8L2hlYWQ+Cgo8Ym9keT4KICA8ZGl2 IGNsYXNzPSJjb250YWluZXIiPgogICAgPGRpdiBjbGFzcz0ibGVmdCI+CiAgICA8L2Rpdj4KICAg IDxkaXYgY2xhc3M9InJpZ2h0Ij4KICAgICAgPHA+YTwvcD4KICAgICAgPHA+YTwvcD4KICAgICAg PHA+YTwvcD4KICAgICAgPHA+YTwvcD4KICAgICAgPHA+YTwvcD4KICAgICAgPHA+YTwvcD4KICAg ICAgPGRpdiBjbGFzcz0iYmFyIj5UaGlzIGJhciBzaG91bGQgYmUgb24gdG9wIG9mIHRoZSByZWQg ZGl2PC9kaXY+CiAgICA8L2Rpdj4KICA8L2Rpdj4KPC9ib2R5PgoKPC9odG1sPgo=