Bug 264392

Summary: Margin accumulates on every layout in Shadow DOM
Product: WebKit Reporter: oceansky <cris>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: ahmad.saleem792, bfulgham, koivisto, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 17   
Hardware: All   
OS: All   
Attachments:
Description Flags
Testcase (from GitHub) none

oceansky
Reported 2023-11-08 01:23:33 PST
Hello, This bug is best described by seeing it in action. I have created a minimal reproduction here: https://github.com/00000o1/-/blob/boss/bug-examples/safari-bug-nov-8-2023/index.html Or you can try it live on the GitHub pages site: https://00000o1.github.io/-/bug-examples/safari-bug-nov-8-2023/index.html I have explained the bug on that page. I will copy the description section below for convenience: There is no code to add the increasing margin that you see. It simply occurs. What's required to summon this bug? - The custom elements - <!DOCTYPE html> - :host { margin: XXXpx; } I checked values including 0.1px, 1px, 84px, 999px and all reproduced the bug. 0px did not as did removing this rule. If you remove any of these, the bug refuses to be conjured. What version of Safari was this discovered in? I've only checked with Version 17.1 (18616.2.9.11.9, 18616) on Ventura and Safari on iOS 16.7.2 (20H115). They both reproduce the bug.
Attachments
Testcase (from GitHub) (2.40 KB, text/html)
2024-04-15 04:21 PDT, Ahmad Saleem 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2023-11-15 01:24:18 PST
<rdar://problem/118443538>
Simon Fraser (smfr)
Comment 2 2023-11-15 13:44:54 PST
Could you describe what the bug actually is? I've loaded your test case, and I see "I am the bug" but it would be better to say something like "You should see a green box below, but it's hidden" or something.
oceansky
Comment 3 2023-11-19 11:50:03 PST
Hello Simon Fraser, Yes, thank you, I'm sorry about that! You're right that it could indeed be described better. The bug is the accumulation of a margin when the custom element is re-rendered. The result is that the paragraph and button are pushed down on each render, by this growing 'ghost' margin. I do not know if it is actually a "margin", but its effect is similar. The only data change is an increment of a counter, displayed as text in the paragraph, which seems unlikely to account for it. Yet it occurs! Examining the DOM in Inspector does not reveal any node leak: there are not unintended nodes being added at each render. I could not find any CSS (styled or computed) that defines this increasing offset. There is no code, style, or change it seems that creates this margin in the reproduction, it simply occurs. It's entirely possible I simply may have missed something. The reproduction code is very straightforward, so that seems unlikely, tho not impossible!
oceansky
Comment 4 2023-11-19 11:52:40 PST
Hit the "Show me the Bug" button to see it in action.
oceansky
Comment 5 2023-12-03 20:41:02 PST
Confirmed this still exists in Version 17.1.2 (18616.2.9.11.12, 18616)
Simon Fraser (smfr)
Comment 6 2023-12-04 10:28:56 PST
Does this only happen when using Shadow DOM?
oceansky
Comment 7 2023-12-04 21:08:33 PST
Let me double check that. I will replace this.shadow.innerText = ... with this.innerText and not create a shadow. Hold on a bit... ! :)
oceansky
Comment 8 2023-12-04 21:21:15 PST
Simon Fraser, you are correct! Your suspicion was right, this only occurs when using Shadow DOM. I've created an absent test case here with no Shadow DOM and no Bug: https://00000o1.github.io/-/bug-examples/safari-bug-nov-8-2023-variant-2/index.html Thank you for the clarifying question! :)
oceansky
Comment 9 2023-12-15 21:52:21 PST
Confirmed that this still exists on Safari Version 17.2 (18617.1.17.11.11, 18617)
Ahmad Saleem
Comment 10 2024-04-15 04:21:51 PDT
Created attachment 470924 [details] Testcase (from GitHub) STR: 1) Load testcase 2) Click `show me the bug' button (once or multiple time) Expected Result: No change in layout Actual Result: On each click, the button gets pushed down. ____ Chrome Canary 125 and Firefox Nightly 126 are working as expected. While STP192 is also broken.
Note You need to log in before you can comment on or make changes to this bug.