ionic-team
bug: slotted content not rendering in WebKit
Prerequisites
- [x] I have read the Contributing Guidelines.
- [x] I agree to follow the Code of Conduct.
- [x] I have searched for existing issues that already report this problem, without success.
Stencil Version
latest
Current Behavior
I opened a bug with WebKit that under certain circumstances slotted content does not render until browser repaint. Unfortunately, you'll meet those circumstances rather quickly when using Stencil's dist output target (due to lazy loading).
This is a nasty bug, and has a major impact for us (e.g. CTA buttons not showing). We're looking for a suitable workaround as we cannot wait on WebKit to pick this up, and then wait for their release cycle. I'm wondering if Stencil could play a role in integrating a fix, as this is going to increasingly impact Stencil projects as more users adopt the latest Safari.
Expected Behavior
n/a
System Info
Steps to Reproduce
n/a
Code Reproduction URL
n/a
Additional Information
No response
@tomherni thanks for sharing. If there is a way to workaround this bug we can consider adding it to the runtime. Keep us posted.
@christian-bromann @tomherni we are also encountering this issue heavily since the release of iOS 18.6.2 specifically.
Some details are also documented in this WebKit issue: https://bugs.webkit.org/show_bug.cgi?id=298401
As stated there:
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 also started happening with whole ion-contents. The grayed out parts from the inspector are not really attached to DOM and have rendering issues.
@capc0 Sadly, the original WebKit issue doesn't seem to get much attention. And it's a pretty bad bug.
A workaround is to set a random CSS property on the host element and to remove it in the next frame, on interval. You'd do this for Safari/iOS only, and for components with default slots. The interval is necessary as the bug can be triggered by dynamic page changes at any time.