140560 2015-01-16 12:56:42 -0800 Paint order problem scrolling a relative-position element over a fixed-position element 2022-07-24 13:54:17 -0700 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) Unspecified Unspecified RESOLVED CONFIGURATION CHANGED InRadar P2 Normal --- 1 stearns webkit-unassigned ahmad.saleem792 ap bfulgham rniwa simon.fraser zalan oldest_to_newest 1061916 0 244792 stearns 2015-01-16 12:56:42 -0800 Created attachment 244792 test file A relative-position element passing over a fixed-position element during scrolling paints in the wrong order. In the test file, the red element should always display above the yellow element. If you load the file in Safari 7 and scroll, the yellow obscures the red. If you reload the file with the scroll position set where the elements overlap, the problem is fixed. If you open or close the web inspector when the elements overlap, the problem is fixed. Does not happen in Safari 6, Firefox or Chrome. Can't reproduce in the view on codepen.io. 1061927 1 simon.fraser 2015-01-16 13:04:09 -0800 This happens because our compositing overlap testing isn't re-run on scrolling, and doesn't account for the fact that scrolling will "smear" the fixed thing down the page. One way to fix this would be for the compositing overlap code to compute a "smeared" rect for the fixed thing. 1061934 2 simon.fraser 2015-01-16 13:08:57 -0800 rdar://problem/15849697 1886368 3 ahmad.saleem792 2022-07-24 10:31:48 -0700 All browsers match in the above test case: 1) Red <div> is below yellow <div> 2) When scrolling 'red' <div> go above yellow and out of view but yellow remain fixed on the webpage. I tested this across Chrome Canary 106, Firefox Nightly 104 and Safari 15.6 on macOS 12.5, I am not sure about the web-spec but this is what I am experiencing in all browsers. Just wanted to share updated results. Thanks! 1886406 4 rniwa 2022-07-24 13:54:17 -0700 All browsers match > Config changed 244792 2015-01-16 12:56:42 -0800 2015-01-16 12:56:42 -0800 test file safari-z-index.html text/html 677 stearns PCFET0NUWVBFIGh0bWw+CjxodG1sIGNsYXNzPSJodG1sIiBsYW5nPSJlbi1VUyI+CiAgPGhlYWQ+ CiAgICA8bWV0YSBodHRwLWVxdWl2PSJDb250ZW50LXR5cGUiIGNvbnRlbnQ9InRleHQvaHRtbDtj aGFyc2V0PVVURi04Ii8+CiAgICA8dGl0bGU+U2Nyb2xsaW5nIHBhaW50IHByb2JsZW08L3RpdGxl PgogICAgCiAgICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgogICAgICBib2R5CiAgICAgIHsKICAg ICAgICBtaW4taGVpZ2h0OiAyMDAwcHg7CiAgICAgIH0KCiAgICAgIC5maXhlZAogICAgICB7CiAg ICAgICAgcG9zaXRpb246IGZpeGVkOwogICAgICAgIHdpZHRoOiAxMDBweDsKICAgICAgICBoZWln aHQ6IDEwMHB4OwogICAgICAgIGJhY2tncm91bmQtY29sb3I6IHllbGxvdzsKICAgICAgfQogICAg CiAgICAgIC5jb250ZW50CiAgICAgIHsKICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZWQ7CiAg ICAgICAgcG9zaXRpb246IHJlbGF0aXZlOwogICAgICAgIHotaW5kZXg6IDI7CiAgICAgICAgdG9w OiAxNTBweDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2hlYWQ+CgogIDxib2R5PgogICAgICA8 ZGl2IGNsYXNzPSJmaXhlZCI+PC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9ImNvbnRlbnQiPgogICAg ICAgIFNIT1VMRCBHTyBBQk9WRQogICAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=