Bug 140560 – Paint order problem scrolling a relative-position element over a fixed-position element

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Alan Stearns]

Created attachment 244792 [details]
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.

[Simon Fraser (smfr)]

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.

[Simon Fraser (smfr)]

rdar://problem/15849697

[Ahmad Saleem]

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!

[Ryosuke Niwa]

All browsers match > Config changed