Bug 224953 - REGRESSION (Safari 14): Elements with negative margin in scrollable regions no longer hidden by parent element padding
Summary: REGRESSION (Safari 14): Elements with negative margin in scrollable regions n...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 14
Hardware: Mac (Intel) Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-04-22 15:34 PDT by John Whelchel
Modified: 2023-03-17 17:41 PDT (History)
5 users (show)

See Also:


Attachments
Safari 14 (Bad) (22.02 KB, image/png)
2021-04-22 15:34 PDT, John Whelchel
no flags Details
Safari 13 (Good) (15.66 KB, image/png)
2021-04-22 15:35 PDT, John Whelchel
no flags Details
WebKit ToT Broken vs Chrome Canary 113 and Firefox Nightly 113 (229.55 KB, image/png)
2023-03-17 17:41 PDT, Ahmad Saleem
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description John Whelchel 2021-04-22 15:34:37 PDT
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.
Comment 1 John Whelchel 2021-04-22 15:35:08 PDT
Created attachment 426857 [details]
Safari 13 (Good)
Comment 2 Simon Fraser (smfr) 2021-04-22 15:36:08 PDT
This is about accelerated overflow scroll having to make self-painting layers.
Comment 3 John Whelchel 2021-04-22 18:07:36 PDT
Cool, that's definitely beyond me to identify :) Happy to update the title if that's helpful
Comment 4 Radar WebKit Bug Importer 2021-04-29 15:35:38 PDT
<rdar://problem/77346751>
Comment 5 Ahmad Saleem 2023-03-17 17:41:18 PDT
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.