REGRESSION (r276882): Shadow trees may use stale style information after inline stylesheet is mutated via CSSOM

• Component: CSS
• Status: RESOLVED FIXED

[Thomas Ladd]

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

[Sam Sneddon [:gsnedders]]

rdar://81483998

[Alexey Proskuryakov]

Could you please clarify if this works on any earlier iOS version?

[Thomas Ladd]

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.

[Thomas Ladd]

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.

[Antti Koivisto]

Can provide a reduction URL that doesn't involve installation steps (jsfiddle for example)?

[Thomas Ladd]

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.

[Antti Koivisto]

Regression from https://trac.webkit.org/changeset/276882/webkit

[Antti Koivisto]

It would be helpful if you could host the repro.

[Thomas Ladd]

Here is the repo hosted on github pages: https://tladd.github.io/styled-components-shadow-dom-ios15-beta-bug/

[Antti Koivisto]

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.

[Antti Koivisto]

Created attachment 436386 [details]
repro

[Antti Koivisto]

Created attachment 436387 [details]
patch

[Antti Koivisto]

Thanks for reduction, it was very helpful.

[Thomas Ladd]

Thanks so much for digging into this!

[EWS]

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].