Created attachment 435189 [details] The grow.me widget losing its styles on the ios 15 beta as its positioning changes On the iOS 15 beta, an app that renders its styles to a shadow DOM and uses styled-components and has SC_DISABLE_SPEEDY set to false (so how it behaves in production by default), any class names that change because of a prop change ends up losing their styles. The new class name is applied to the element but the styles associated with that class name aren't found. When styled-components speedy mode is enabled, it injects styles using the CSS OM instead of putting them into a style tag in the DOM. When the styles get injected into a style tag, the styles work. Styles also work if using CSS OM and not using shadow DOM. So it seems like the regression deals with the combination of shadow DOM and CSS OM together. I created a small reproduction repository here https://github.com/TLadd/styled-components-shadow-dom-ios15-beta-bug Issue filed on styled-components: https://github.com/styled-components/styled-components/issues/3544 Feedback Assistant issue: https://feedbackassistant.apple.com/feedback/9449844
rdar://81483998
Could you please clarify if this works on any earlier iOS version?
The issue does not occur on iOS 14. It does occur on iOS 15 release 3 and release 4 for sure; I'm not sure about release 1 and 2 because I only started testing the beta when release 3 was the latest.
Is there any way I could get some visibility onto whether this is likely to be looked at and addressed prior to iOS 15 being released? Just wondering at this point if I need to start planning for that to occur or not.
Can provide a reduction URL that doesn't involve installation steps (jsfiddle for example)?
https://www.orwhateveryoudo.com/ has an example of it occurring in the wild (where the attached video is recorded) if that works. The app itself is quite a bit bigger and the page has quite a bit more going on than the reproduction repo which I tried to make more minimal. I can try to make something in a jsfiddle too if that doesn't work.
Regression from https://trac.webkit.org/changeset/276882/webkit
It would be helpful if you could host the repro.
Here is the repo hosted on github pages: https://tladd.github.io/styled-components-shadow-dom-ios15-beta-bug/
So the page mutates inline stylesheet in a shadow tree via CSSOM. A bad pattern in terms of performance and everything else, but it should still work. I suppose we are missing some invalidation after mutation.
Created attachment 436386 [details] repro
Created attachment 436387 [details] patch
Thanks for reduction, it was very helpful.
Thanks so much for digging into this!
Committed r281700 (241050@main): <https://commits.webkit.org/241050@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 436387 [details].