264392 2023-11-08 01:23:33 -0800 Margin accumulates on every layout in Shadow DOM 2024-04-15 04:21:51 -0700 1 1 1 Unclassified WebKit Layout and Rendering Safari 17 All All NEW InRadar P2 Normal --- 1 cris webkit-unassigned ahmad.saleem792 bfulgham koivisto simon.fraser webkit-bug-importer zalan oldest_to_newest 1990773 0 cris 2023-11-08 01:23:33 -0800 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. 1992724 1 webkit-bug-importer 2023-11-15 01:24:18 -0800 <rdar://problem/118443538> 1992882 2 simon.fraser 2023-11-15 13:44:54 -0800 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. 1993766 3 cris 2023-11-19 11:50:03 -0800 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! 1993767 4 cris 2023-11-19 11:52:40 -0800 Hit the "Show me the Bug" button to see it in action. 1996622 5 cris 2023-12-03 20:41:02 -0800 Confirmed this still exists in Version 17.1.2 (18616.2.9.11.12, 18616) 1996773 6 simon.fraser 2023-12-04 10:28:56 -0800 Does this only happen when using Shadow DOM? 1996991 7 cris 2023-12-04 21:08:33 -0800 Let me double check that. I will replace this.shadow.innerText = ... with this.innerText and not create a shadow. Hold on a bit... ! :) 1996996 8 cris 2023-12-04 21:21:15 -0800 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! :) 2000148 9 cris 2023-12-15 21:52:21 -0800 Confirmed that this still exists on Safari Version 17.2 (18617.1.17.11.11, 18617) 2028474 10 470924 ahmad.saleem792 2024-04-15 04:21:51 -0700 Created attachment 470924 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. 470924 2024-04-15 04:21:51 -0700 2024-04-15 04:21:51 -0700 Testcase (from GitHub) Testcase_shadow_dom.html text/html 2458 ahmad.saleem792 PCFET0NUWVBFIGh0bWw+CjxzY3JpcHQ+CiAgY2xhc3MgU2FmYXJpQnVnIGV4dGVuZHMgSFRNTEVs ZW1lbnQgewogICAgY29uc3RydWN0b3IoKSB7CiAgICAgIHN1cGVyKCk7CiAgICAgIHRoaXMuc2hh ZG93ID0gdGhpcy5hdHRhY2hTaGFkb3coeyBtb2RlOiAnY2xvc2VkJyB9KTsKCiAgICAgIHRoaXMu Y291bnQgPSAwOwogICAgfQoKICAgIGNvbm5lY3RlZENhbGxiYWNrKCkgewogICAgICB0aGlzLnJl bmRlcigpOwogICAgfQoKICAgIHJlbmRlcigpIHsKICAgICAgdGhpcy5zaGFkb3cuaW5uZXJIVE1M ID0gYAogICAgICAgIDxzdHlsZT4KICAgICAgICAgIDpob3N0IHsKICAgICAgICAgICAgbWFyZ2lu OiAxNnB4OwogICAgICAgICAgfQogICAgICAgIDwvc3R5bGU+CiAgICAgICAgPHA+SSBhbSBhIGJ1 ZyAke3RoaXMuY291bnR9PC9wPgogICAgICBgOwogICAgfQogIH0KCiAgY2xhc3MgU2FmYXJpQnVn SUkgZXh0ZW5kcyBIVE1MRWxlbWVudCB7CiAgICBjb25zdHJ1Y3RvcigpIHsKICAgICAgc3VwZXIo KTsKICAgICAgdGhpcy5zaGFkb3cgPSB0aGlzLmF0dGFjaFNoYWRvdyh7IG1vZGU6ICdjbG9zZWQn IH0pOwogICAgfQoKICAgIGNvbm5lY3RlZENhbGxiYWNrKCkgewogICAgICB0aGlzLnJlbmRlcigp OwogICAgfQoKICAgIHVwZGF0ZSgpIHsKICAgICAgY29uc3Qgb3RoZXIgPSB0aGlzLmdldFJvb3RO b2RlKCkucXVlcnlTZWxlY3Rvcignc2FmYXJpLWJ1ZycpOwogICAgICBvdGhlci5jb3VudCsrOwog ICAgICBvdGhlci5yZW5kZXIoKTsKICAgIH0KCgogICAgcmVuZGVyKCkgewogICAgICB0aGlzLnNo YWRvdy5pbm5lckhUTUwgPSBgCiAgICAgICAgPGJ1dHRvbiBvbmNsaWNrPSJ0aGlzLmdldFJvb3RO b2RlKCkuaG9zdC51cGRhdGUoKSI+U2hvdyBtZSB0aGUgYnVnISDwn5CcPC9idXR0b24+CiAgICAg IGA7CiAgICB9CiAgfQoKICBjbGFzcyBTYWZhcmlCdWdJSUkgZXh0ZW5kcyBIVE1MRWxlbWVudCB7 CiAgICBjb25zdHJ1Y3RvcigpIHsKICAgICAgc3VwZXIoKTsKICAgICAgdGhpcy5zaGFkb3cgPSB0 aGlzLmF0dGFjaFNoYWRvdyh7IG1vZGU6ICdjbG9zZWQnIH0pOwogICAgfQoKICAgIGNvbm5lY3Rl ZENhbGxiYWNrKCkgewogICAgICB0aGlzLnJlbmRlcigpOwogICAgfQoKICAgIHJlbmRlcigpIHsK ICAgICAgdGhpcy5zaGFkb3cuaW5uZXJIVE1MID0gYAogICAgICAgIDxoMT5DdXRlIEJ1ZyDwn5Cc PC9oMT4KICAgICAgICA8c2FmYXJpLWJ1Zz48L3NhZmFyaS1idWc+CiAgICAgICAgPHNhZmFyaS1i dWdpaT48L3NhZmFyaS1idWdpaT4KICAgICAgYDsKICAgIH0KICB9CgogIGN1c3RvbUVsZW1lbnRz LmRlZmluZSgnc2FmYXJpLWJ1ZycsIFNhZmFyaUJ1Zyk7CiAgY3VzdG9tRWxlbWVudHMuZGVmaW5l KCdzYWZhcmktYnVnaWknLCBTYWZhcmlCdWdJSSk7CiAgY3VzdG9tRWxlbWVudHMuZGVmaW5lKCdz YWZhcmktYnVnaWlpJywgU2FmYXJpQnVnSUlJKTsKPC9zY3JpcHQ+CjxzYWZhcmktYnVnaWlpPjwv c2FmYXJpLWJ1Z2lpaT4KPGhyIHN0eWxlPSJtYXJnaW46IDMycHggMnB4Ij4KPGRldGFpbHM+CiAg PHN1bW1hcnk+V2hhdCdzIGdvaW5nIG9uIGhlcmU/PC9zdW1tYXJ5PgogIDxwPlRoZXJlIGlzIG5v IGNvZGUgdG8gYWRkIHRoZSBpbmNyZWFzaW5nIG1hcmdpbiB0aGF0IHlvdSBzZWUuIEl0IHNpbXBs eSBvY2N1cnMuPC9wPgogIDxkbD4KICAgIDxkdD5XaGF0J3MgcmVxdWlyZWQgdG8gc3VtbW9uIHRo aXMgYnVnPzwvZHQ+CiAgICA8ZGQ+CiAgICAgIDx1bD4KICAgICAgICA8bGk+U2hhZG93IERPTSAo c2VlIDxhIGhyZWY9c2FmYXJpLWJ1Zy1ub3YtOC0yMDIzLXZhcmlhbnQtMj5hIG5vbi1TaGFkb3cg RE9NIHZlcnNpb24gd2l0aG91dCB0aGUgYnVnPC9hPik8L2xpPgogICAgICAgIDxsaT5UaGUgY3Vz dG9tIGVsZW1lbnRzPC9saT4KICAgICAgICA8bGk+PHByZT4mbHQ7IURPQ1RZUEUgaHRtbD48L3By ZT48L2xpPgogICAgICAgIDxsaT48cHJlPjpob3N0IHsgbWFyZ2luOiBYWFhweDsgfTwvcHJlPiBJ IGNoZWNrZWQgdmFsdWVzIGluY2x1ZGluZyAwLjFweCwgMXB4LCA4NHB4LCA5OTlweCBhbmQgYWxs IHJlcHJvZHVjZWQgdGhlIGJ1Zy4gMHB4IGRpZCBub3QgYXMgZGlkIHJlbW92aW5nIHRoaXMgcnVs ZS48L2xpPgogICAgICA8L3VsPgogICAgICA8cD5JZiB5b3UgcmVtb3ZlIGFueSBvZiB0aGVzZSwg dGhlIGJ1ZyByZWZ1c2VzIHRvIGJlIGNvbmp1cmVkLjwvcD4KICAgIDwvZGQ+CiAgICA8ZHQ+V2hh dCB2ZXJzaW9uIG9mIFNhZmFyaSB3YXMgdGhpcyBkaXNjb3ZlcmVkIGluPzwvZHQ+CiAgICA8ZGQ+ CiAgICAgIEkndmUgb25seSBjaGVja2VkIHdpdGggVmVyc2lvbiAxNy4xICgxODYxNi4yLjkuMTEu OSwgMTg2MTYpIG9uIFZlbnR1cmEgYW5kIAogICAgICBTYWZhcmkgb24gaU9TIDE2LjcuMiAoMjBI MTE1KS4gVGhleSBib3RoIHJlcHJvZHVjZSB0aGUgYnVnLgogICAgPC9kZD4KICA8L2RsPgo8L2Rl dGFpbHM+Cg==