Bug 293476

Summary: Slotted content in custom element not rendering
Product: WebKit Reporter: tomherni <tomherni>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: ahmad.saleem792, bfulgham, rniwa, simon.fraser, steveorvell, tomherni, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 18   
Hardware: Mac (Apple Silicon)   
OS: macOS 15   
Bug Depends on:    
Bug Blocks: 148695    
Attachments:
Description Flags
Reproduction code index.html
none
macOS Safari actual (NOK)
none
macOS Safari expected
none
iOS Safari NOK
none
macOS Chrome OK
none
minimal repro with details element
none
repro stp-219 none

tomherni
Reported 2025-05-23 00:41:52 PDT
Created attachment 475351 [details] Reproduction code index.html Under specific circumstances, slotted content does not render in a custom element. It seems that a repaint makes the content appear again. See the attached index.html file. When opening in Safari on either macOS or iOS, you will see a button "Make element appear". This is not the only thing that is supposed to be rendered on the page: there should also be a custom element with slotted text "Hello world". However, this custom element is not visible. Clicking the button will set the custom element's color CSS to red, making the custom element finally appear. As mentioned, this is under specific circumstances. The index.html file contains comments that further elaborate on this. For example: * The custom element appears to require wrapping elements (an inline element such as a span, and a block element such as a div). * There must be another custom element on the page that turns itself into a block element with CSS after a timeout. The circumstances are specific, especially related to the timeout. But when custom elements implement some form of lazy loading, this scenario is very likely to occur. macOS, Sequoia 15.5 (Apple M3) * Safari 18.5 – NOK * Chrome 137 – OK * Firefox 138 – OK iPhone 15 Pro Max, iOS 18.4.1 * Safari – NOK * Brave 1.78 (103) – NOK
Attachments
Reproduction code index.html (1.73 KB, text/html)
2025-05-23 00:41 PDT, tomherni
no flags
macOS Safari actual (NOK) (283.03 KB, image/png)
2025-05-23 00:43 PDT, tomherni
no flags
macOS Safari expected (287.01 KB, image/png)
2025-05-23 00:43 PDT, tomherni
no flags
iOS Safari NOK (106.10 KB, image/jpeg)
2025-05-23 00:44 PDT, tomherni
no flags
macOS Chrome OK (292.19 KB, image/png)
2025-05-23 00:45 PDT, tomherni
no flags
minimal repro with details element (153 bytes, text/html)
2025-05-23 06:41 PDT, Steve Orvell
no flags
repro stp-219 (780 bytes, text/html)
2025-05-23 07:08 PDT, Steve Orvell
no flags
tomherni
Comment 1 2025-05-23 00:43:07 PDT
Created attachment 475352 [details] macOS Safari actual (NOK)
tomherni
Comment 2 2025-05-23 00:43:32 PDT
Created attachment 475353 [details] macOS Safari expected
tomherni
Comment 3 2025-05-23 00:44:09 PDT
Created attachment 475354 [details] iOS Safari NOK
tomherni
Comment 4 2025-05-23 00:45:10 PDT
Created attachment 475355 [details] macOS Chrome OK
Ahmad Saleem
Comment 5 2025-05-23 04:39:07 PDT
*** WebKit ToT (295329@main) *** Reproduces and don't get `Hello World` *** Chrome Canary 138.0.7195.0 (Official Build) canary (arm64) *** Does not reproduce and show `Hello World` *** Firefox Nightly 140 (20250522090848) *** Does not reproduce and show `Hello World` *** Ladybird (4b3715ccba326ee983d315d50b1d89cf10827aa3) *** Does not reproduce and show `Hello World`
Steve Orvell
Comment 6 2025-05-23 06:27:24 PDT
Here is an even simpler repro, toggling the details closed/open fixes it. <span> <details open style="border: 1px solid;">details content</details> <span id="s"></span> </span> <script> s.attachShadow({mode: 'open'}); setTimeout(() => { s.shadowRoot.innerHTML = `<style>:host { display: block; }</style>details ok?`; }, 1000); </script>
Steve Orvell
Comment 7 2025-05-23 06:33:35 PDT
And still simpler: <span> <details open style="border: 1px solid;">details content</details> <span id="s">details ok?</span> </span> <script> setTimeout(() => { s.style.display = 'block'; }, 1000); </script>
Steve Orvell
Comment 8 2025-05-23 06:41:17 PDT
Created attachment 475356 [details] minimal repro with details element Details text disappears when adjacent span asynchronously becomes `display: block`. Toggle the details open/closed to fix.
Steve Orvell
Comment 9 2025-05-23 06:45:14 PDT
Huh, that attached version repros on Safari Version 18.3 (20620.2.4.11.5), but not STP Release 219 (Safari 18.4, WebKit 20622.1.12).
tomherni
Comment 10 2025-05-23 07:03:16 PDT
@Steve Yeah both of those don't repro for me either in Safari 18.5. I guess that's a different issue that's already fixed.
Steve Orvell
Comment 11 2025-05-23 07:08:45 PDT
Created attachment 475357 [details] repro stp-219 This one repros for me on STP-219 using just Shadow DOM.
Radar WebKit Bug Importer
Comment 12 2025-05-30 00:42:16 PDT
Note You need to log in before you can comment on or make changes to this bug.