NEW298401
Slotted content in web components hidden due to slot display calculation 
https://bugs.webkit.org/show_bug.cgi?id=298401
Summary Slotted content in web components hidden due to slot display calculation
Péter Gaál
Reported 2025-09-04 09:42:25 PDT
We are working with custom web components and discovered a rendering issue that only occurs in Safari. Steps to reproduce: Create a <custom-radio-group> web component containing <custom-radio> elements. Set the invalid attribute on <custom-radio-group>. Expected result: The <custom-radio> labels remain visible. Actual result (Safari only): The <custom-radio> labels are hidden. Workaround: When the labels are already hidden (height: 0), applying a color CSS property to <custom-radio-group> makes them visible again. Reproducible example: https://lit.dev/playground/#project=W3sibmFtZSI6InRlc3QudHMiLCJjb250ZW50IjoiaW1wb3J0IHsgaHRtbCwgY3NzLCBMaXRFbGVtZW50IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQsIHByb3BlcnR5IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuXG5AY3VzdG9tRWxlbWVudCgnY3VzdG9tLXJhZGlvLWdyb3VwJylcbmV4cG9ydCBjbGFzcyBDdXN0b21SYWRpb0dyb3VwIGV4dGVuZHMgTGl0RWxlbWVudCB7XG4gIEBwcm9wZXJ0eSh7IHR5cGU6IEJvb2xlYW4gfSkgaW52YWxpZCA9IGZhbHNlO1xuXG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgICAgPGRpdj5Hcm91cCBsYWJlbDwvZGl2PlxuICAgICAgICA8c2xvdD48L3Nsb3Q-XG4gICAgICAgIDxzbG90IG5hbWU9XCJmZWVkYmFja1wiPlxuXHRcdFx0PGN1c3RvbS1mZWVkYmFjayA_aW52YWxpZD1cIiR7dGhpcy5pbnZhbGlkfVwiPjwvY3VzdG9tLWZlZWRiYWNrPlxuXHRcdDwvc2xvdD5cbiAgICBgO1xuICB9XG59XG5cbkBjdXN0b21FbGVtZW50KCdjdXN0b20tcmFkaW8nKVxuZXhwb3J0IGNsYXNzIEN1c3RvbVJhZGlvIGV4dGVuZHMgTGl0RWxlbWVudCB7XG4gIEBwcm9wZXJ0eSh7IHR5cGU6IFN0cmluZywgcmVmbGVjdDogdHJ1ZSB9KSBsYWJlbDogc3RyaW5nIHwgdW5kZWZpbmVkO1xuXG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gaHRtbGA8ZGl2PjxzbG90IG5hbWU9XCJsYWJlbFwiPnJhZGlvIGxhYmVsPC9zbG90PjwvZGl2PmA7XG4gIH1cbn1cblxuQGN1c3RvbUVsZW1lbnQoJ2N1c3RvbS1mZWVkYmFjaycpXG5leHBvcnQgY2xhc3MgQ3VzdG9tRmVlZGJhY2sgZXh0ZW5kcyBMaXRFbGVtZW50IHtcbiAgQHByb3BlcnR5KHsgdHlwZTogQm9vbGVhbiwgcmVmbGVjdDogdHJ1ZSB9KSBpbnZhbGlkID0gZmFsc2U7XG4gIFxuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIHRoaXMuaW52YWxpZCA_IGh0bWxgPHNsb3QgbmFtZT1cImVycm9yXCI-ZXJyb3I8L3Nsb3Q-YCA6IGh0bWxgPHNsb3QgbmFtZT1cImhlbHBlclwiPmhlbHBlcjwvc2xvdD5gO1xuICB9XG59XG4ifSx7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhRE9DVFlQRSBodG1sPlxuPGhlYWQ-XG4gIDxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIHNyYz1cIi4vdGVzdC5qc1wiPjwvc2NyaXB0PlxuPC9oZWFkPlxuPGJvZHk-XG4gIDxjdXN0b20tcmFkaW8tZ3JvdXAgbGFiZWw9XCJMYWJlbFwiPlxuICAgIDxjdXN0b20tcmFkaW8gdmFsdWU9XCJhXCIgbGFiZWw9XCJWYWx1ZTFcIj48L2N1c3RvbS1yYWRpbz5cbiAgICA8Y3VzdG9tLXJhZGlvIHZhbHVlPVwiYlwiIGxhYmVsPVwiVmFsdWUyXCI-PC9jdXN0b20tcmFkaW8-XG4gIDwvY3VzdG9tLXJhZGlvLWdyb3VwPlxuICA8YnV0dG9uIGlkPVwidG9nZ2xlXCIgc3R5bGU9XCJkaXNwbGF5OiBibG9jazsgbWFyZ2luLXRvcDogMXJlbTtcIj5Ub2dnbGUgaW52YWxpZDwvYnV0dG9uPlxuICA8YnV0dG9uIGlkPVwiY29sb3JcIiBzdHlsZT1cImRpc3BsYXk6IGJsb2NrOyBtYXJnaW4tdG9wOiAxcmVtO1wiPkFkZCBcImNvbG9yOiBibGFja1wiIHN0eWxlPC9idXR0b24-XG4gIDxzY3JpcHQ-XG4gICAgICBjb25zdCByYWRpb0dyb3VwID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignY3VzdG9tLXJhZGlvLWdyb3VwJyk7XG4gICAgXG4gICAgICBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjdG9nZ2xlJykuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCAoKSA9PiB7XG4gICAgICAgIHJhZGlvR3JvdXAuaW52YWxpZCA9ICFyYWRpb0dyb3VwLmludmFsaWQ7XG4gICAgICB9KTtcbiAgICAgIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNjb2xvcicpLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgKCkgPT4ge1xuICAgICAgICByYWRpb0dyb3VwLnN0eWxlLmNvbG9yID0gJyMwMDAnO1xuICAgICAgfSk7XG4gIDwvc2NyaXB0PlxuPC9ib2R5PlxuIn0seyJuYW1lIjoicGFja2FnZS5qc29uIiwiY29udGVudCI6IntcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwibGl0XCI6IFwiXjMuMC4wXCIsXG4gICAgXCJAbGl0L3JlYWN0aXZlLWVsZW1lbnRcIjogXCJeMi4wLjBcIixcbiAgICBcImxpdC1lbGVtZW50XCI6IFwiXjQuMC4wXCIsXG4gICAgXCJsaXQtaHRtbFwiOiBcIl4zLjAuMFwiXG4gIH1cbn0iLCJoaWRkZW4iOnRydWV9XQ
Attachments
Add attachment proposed patch, testcase, etc.
Péter Gaál
Comment 1 2025-09-04 10:33:31 PDT
If I change the <slot> display style from "contents" to "block", the bug is fixed. The issue appears to be related only to the calculation of the slot's display content property. This works correctly in all other browsers; the problem occurs only in Safari.
Radar WebKit Bug Importer
Comment 2 2025-09-04 10:42:08 PDT
<rdar://problem/159866364>
s.hagemann
Comment 3 2025-09-11 02:25:49 PDT
We are also experiencing this issue since updating to iOS 18.6.2 When slots are used in components the children within the slots are sometimes not rendered in the DOM, when they are not encapsulated within another HTML element. In our use case using the Ionic component framework, the following does not always render (ion-badge internally has a slotted element via shadow content): <ion-badge>Text</ion-badge> Workaround is to wrap the inner part in another element: <ion-badge><span>Text</span></ion-badge> This effectively breaks the UI of our app on iOS devices once users install the lastest iOS version.
Ahmad Saleem
Comment 4 2025-10-17 16:21:59 PDT
@Peter - does it impact https://www.strivacity.com live website? Or just something work-in-progress? Just trying to understand customer impact? Same question for @Hagemann?
Péter Gaál
Comment 5 2025-10-18 06:17:53 PDT
(In reply to Ahmad Saleem from comment #4) > @Peter - does it impact https://www.strivacity.com live website? Or just > something work-in-progress? Just trying to understand customer impact? > > Same question for @Hagemann? It impacts the login interfaces used by our customers. We use web components there, and our radio input fields are broken in Safari. A temporary fix is to override the <slot> element’s display property from contents to block.
s.hagemann
Comment 6 2025-10-19 23:26:00 PDT
Yes it does impact our production web applications. For us it only happens with unlucky combinations of iPhone screen sizes and webview rendered content height. So some users experience missing UI components which are not rendered. Which seems "random" for the user.
Antti Koivisto
Comment 7 2025-10-23 07:30:56 PDT
Minimal repro <!doctype html> <outer-custom id=c> <template shadowrootmode="open"> <div>outer </div> <slot></slot> <slot name="fail"> <inner-custom id=t> <template shadowrootmode="open"> <slot id="innerslot" name="foo"> inner</slot> </template> </inner-custom> </slot> </template> This should be visible. </outer-custom> <script> document.body.offsetLeft; const innerSlot = c.shadowRoot.getElementById("t").shadowRoot.getElementById("innerslot"); innerSlot.setAttribute("name", "foo"); </script>
Antti Koivisto
Comment 8 2025-10-23 08:47:51 PDT
This is an inline continuation bug (<span><div></div><span></span></span> essentially, with some mutations), the imminent refactoring to remove them fixes this.
Note You need to log in before you can comment on or make changes to this bug.