REGRESSION (Safari 14): Elements with negative margin in scrollable regions no longer hidden by parent element padding

• Component: Layout and Rendering
• Status: NEW ---

[John Whelchel]

Created attachment 426856 [details]
Safari 14 (Bad)

A recent bug was introduced by Safari 14 where elements positioned via negative margin to be hidden "behind" the padding of a parent are no longer hidden if they are contained within a Scrollable area.

I'm not a layout expert, so this is my best interpretation of what is happening.

However, this JSFiddle reproduces the issue in a roughly minimal way: https://jsfiddle.net/whelchel/veL7dkyj/18/. I've also attached one screenshot - one from Safari 14 (bad). I will try and see if I can attach a second with the good behavior.

In Safari 13, both times the SVG positioned with negative margin is hidden. This is the correct, expected behavior.

In Safari 14, when contained by a scrollable, the SVG is visible, despite the padding that should "cover" it. You can compare the top and bottom instances to see the difference, with and without the scrollable.

[John Whelchel]

Created attachment 426857 [details]
Safari 13 (Good)

[Simon Fraser (smfr)]

This is about accelerated overflow scroll having to make self-painting layers.

[John Whelchel]

Cool, that's definitely beyond me to identify :) Happy to update the title if that's helpful

[Radar WebKit Bug Importer]

<rdar://problem/77346751>

[Ahmad Saleem]

Created attachment 465487 [details]
WebKit ToT Broken vs Chrome Canary 113 and Firefox Nightly 113

It is still an issue in WebKit ToT as shown in the picture.