Bug 298401
| Summary: | Slotted content in web components hidden due to slot display calculation | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Péter Gaál <peter.gaal> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | ahmad.saleem792, bfulgham, koivisto, malcolm.smith, s.hagemann, simon.fraser, webkit-bug-importer, woodlxf00, zalan |
| Priority: | P2 | Keywords: | BrowserCompat, InRadar |
| Version: | Safari Technology Preview | ||
| Hardware: | Mac (Apple Silicon) | ||
| OS: | macOS 15 | ||
Péter Gaál
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
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
<rdar://problem/159866364>
s.hagemann
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
@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
(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
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
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
This is an inline continuation bug (<span><div></div><span></span></span> essentially, with some mutations), the imminent refactoring to remove them fixes this.