192877 2018-12-19 14:05:23 -0800 user scrollable overflow causes behavior "as-if-positioned" lifting itself higher in paint order than if not overflowing 2018-12-20 16:23:21 -0800 1 1 1 Unclassified WebKit Layout and Rendering Safari Technology Preview Unspecified Unspecified NEW InRadar P2 Normal --- 1 hi webkit-unassigned bfulgham simon.fraser webkit-bug-importer zalan oldest_to_newest 1489466 0 357723 hi 2018-12-19 14:05:23 -0800 Created attachment 357723 animating scrollable content to expose paint order bug Can't seem to find a webkit bug tracking this, though it is seemingly known among vendor developers (https://github.com/w3c/csswg-drafts/issues/2717#issuecomment-395911418) 1. Open the attached case. 2. Watch overflow:auto box that has green content grow and shrink, creating and removing user scrollable content every 2 seconds. 3. See that when it overflows, it behaves as-if-positioned painted higher and lower in order than the red block (which also is always lifted higher because of overflow). Compat Firefox doesn't let "user scrollable" overflow affect paint order, red block is always behind green in test case. Blink has same/similar issue, but is working on fix??? https://bugs.chromium.org/p/chromium/issues/detail?id=370604#c_ts1545253494 *I say user scrollable, because overflow:hidden doesn't create compositing order issue 1490162 1 webkit-bug-importer 2018-12-20 16:23:21 -0800 <rdar://problem/46887177> 357723 2018-12-19 14:05:23 -0800 2018-12-19 14:05:23 -0800 animating scrollable content to expose paint order bug testcase.html text/html 937 hi PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICA8bWV0YSBjaGFyc2V0PSJ1dGYtOCI+CiAg PHRpdGxlPm92ZXJmbG93IGNhbiAqc29tZXRpbWVzIGFmZmVjdCBpbXBsaWNpdCBzdGFja2luZyBv cmRlciBhY3RpbmcgbGlrZSBpdCdzIHBvc2l0aW9uZWQ8L3RpdGxlPgogIDxzdHlsZT4KICAJLmJv eCB7CiAgCQl3aWR0aDogMjAwcHg7CiAgCQloZWlnaHQ6IDIwMHB4OwogIAkJb3ZlcmZsb3c6IHNj cm9sbDsKICAJfQogIAkuYm94Om50aC1jaGlsZCgyKSB7CiAgCQltYXJnaW4tdG9wOiAtMTAwcHg7 CiAgCQltYXJnaW4tbGVmdDogMTAwcHg7CiAgCX0KICAJLmJveDpudGgtY2hpbGQoMSkgLmNvbnRl bnQgewogIAkJYmFja2dyb3VuZC1jb2xvcjogcmVkOwogICAgCWhlaWdodDogMjUwcHg7CiAgCX0K ICAJLmJveDpudGgtY2hpbGQoMikgLmNvbnRlbnQgewogIAkJYmFja2dyb3VuZC1jb2xvcjogZ3Jl ZW47CiAgICAJLS1oZWlnaHQtc3RhcnQ6IDE1MHB4OwogICAgCS0taGVpZ2h0LWVuZDogMjUwcHg7 CiAgICAJYW5pbWF0aW9uOiBhbmltLWhlaWdodCBlYXNlIDJzIGFsdGVybmF0ZSBpbmZpbml0ZTsK ICAJfQogIAlAa2V5ZnJhbWVzIGFuaW0taGVpZ2h0IHsKICAgIAkwJSw1MCUgICB7IGhlaWdodDog MTUwcHg7fQogICAgCTEwMCUgeyBoZWlnaHQ6IDI1MHB4O30KICAJfQogIAkvKiBhbHNvIGZpcmVm b3ggb24gbWFjb3MgcGxhY2VzIHJlZCBib3hlcyBzY3JvbGxiYXIgb24gdG9wIG9mIGdyZWVuIGVs ZW1lbnQgdW5sZXNzIGl0IGlzIHBvc2l0aW9uZWQgKi8KICA8L3N0eWxlPgo8L2hlYWQ+Cjxib2R5 PgogIDxkaXYgY2xhc3M9ImJveCI+CiAgICA8ZGl2IGNsYXNzPSJjb250ZW50Ij48L2Rpdj4KICA8 L2Rpdj4KICA8ZGl2IGNsYXNzPSJib3giPgogICAgPGRpdiBjbGFzcz0iY29udGVudCI+PC9kaXY+ CiAgPC9kaXY+CjwvYm9keT4KPC9odG1sPg==