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.
<rdar://problem/118443538>
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.
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!
Hit the "Show me the Bug" button to see it in action.
Confirmed this still exists in Version 17.1.2 (18616.2.9.11.12, 18616)
Does this only happen when using Shadow DOM?
Let me double check that. I will replace this.shadow.innerText = ... with this.innerText and not create a shadow. Hold on a bit... ! :)
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! :)
Confirmed that this still exists on Safari Version 17.2 (18617.1.17.11.11, 18617)
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.