Bug 299951

Summary: Slotted Text Nodes get hidden when elements next to the slot change display
Product: WebKit Reporter: patrick
Component: Layout and RenderingAssignee: Antti Koivisto <koivisto>
Status: RESOLVED FIXED    
Severity: Normal CC: ahmad.saleem792, bfulgham, karlcow, koivisto, rniwa, simon.fraser, webkit-bug-importer, woodlxf00, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 18   
Hardware: Mac (Apple Silicon)   
OS: All   
See Also: https://github.com/web-platform-tests/wpt/pull/55669
Bug Depends on:    
Bug Blocks: 148695    
Attachments:
Description Flags
rendering in safari, firefox, chrome none

patrick
Reported 2025-10-01 06:04:38 PDT
We are using Web Components to build our design system. As of Safari 18 we have noticed a strange bug. Whenever we change the display styling of an element next to a slot, it can happen that Safari does not render the content in the slot anymore if it is only a Text Node. This does not happen, when we wrap the slotted node with a span for example. Minimum Reproduction CodePen: https://codepen.io/Patrick-Walther-the-scripter/pen/raxLXYj If you check the CodePen above with non Webkit Browser you can see that the icon next to the text gets hidden or shown when you click on the button. With Safari 18 or newer the Text Node becomes invisible after a couple of clicks even though it remains in the DOM and is not hidden by styling.
Attachments
rendering in safari, firefox, chrome (366.09 KB, image/png)
2025-10-01 23:38 PDT, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Karl Dubost
Comment 1 2025-10-01 23:38:59 PDT
Created attachment 476935 [details] rendering in safari, firefox, chrome Patrick, Thanks! This is the state in all browsers after two clicks on the button.
Karl Dubost
Comment 2 2025-10-01 23:40:29 PDT
So if the text is not visible that looks like more Layout and Rendering.
Karl Dubost
Comment 3 2025-10-01 23:42:44 PDT
Opening the Web Inspector in Safari. ``` toggle-button { cursor: pointer; border-radius: 0.75rem; } ``` enabling/disabling the border-radius to trigger a repaint makes the text appears again.
Radar WebKit Bug Importer
Comment 4 2025-10-08 06:05:13 PDT
<rdar://problem/162193811>
Antti Koivisto
Comment 5 2025-10-24 01:16:59 PDT
Reduction <div id="test"> <template shadowrootmode=open> <style> .content { border: 2px solid blue; display: flex; } </style> <div class="content"> <slot class="text-slot"></slot> <div id="toggle"></div> </div> </template> This should be visible. </div> <script> document.body.offsetLeft; const toggle = test.shadowRoot.querySelector("#toggle"); toggle.style.display = "none"; document.body.offsetLeft; toggle.style.display = "block"; </script>
Antti Koivisto
Comment 6 2025-10-24 01:20:07 PDT
Wrapping the text in a span works around this. The anonymous inline wrapper for the text is not updating properly on mutation.
Antti Koivisto
Comment 7 2025-10-24 01:55:18 PDT
Ah no, it is about render tree rebuild roots.
Antti Koivisto
Comment 8 2025-10-24 02:23:47 PDT
Pull request: https://github.com/WebKit/WebKit/pull/52948
EWS
Comment 9 2025-10-24 04:27:57 PDT
Committed 302082@main (0ad2da25310e): <https://commits.webkit.org/302082@main> Reviewed commits have been landed. Closing PR #52948 and removing active labels.
Antti Koivisto
Comment 10 2025-10-27 01:41:26 PDT
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/55669
Note You need to log in before you can comment on or make changes to this bug.