Bug 228917 - REGRESSION (r276882): Shadow trees may use stale style information after inline stylesheet is mutated via CSSOM
Summary: REGRESSION (r276882): Shadow trees may use stale style information after inli...
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: iPhone / iPad Other
: P2 Major
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2021-08-09 10:04 PDT by Thomas Ladd
Modified: 2021-08-27 10:12 PDT (History)
6 users (show)

See Also:

The grow.me widget losing its styles on the ios 15 beta as its positioning changes (32.00 MB, video/mp4)
2021-08-09 10:04 PDT, Thomas Ladd
no flags Details
repro (293 bytes, text/html)
2021-08-25 05:34 PDT, Antti Koivisto
no flags Details
patch (4.08 KB, patch)
2021-08-25 05:50 PDT, Antti Koivisto
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Thomas Ladd 2021-08-09 10:04:51 PDT
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
Comment 1 Sam Sneddon [:gsnedders] 2021-08-09 12:15:41 PDT
Comment 2 Alexey Proskuryakov 2021-08-09 17:45:22 PDT
Could you please clarify if this works on any earlier iOS version?
Comment 3 Thomas Ladd 2021-08-09 18:47:37 PDT
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.
Comment 4 Thomas Ladd 2021-08-23 07:41:56 PDT
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.
Comment 5 Antti Koivisto 2021-08-24 05:23:02 PDT
Can provide a reduction URL that doesn't involve installation steps (jsfiddle for example)?
Comment 6 Thomas Ladd 2021-08-24 05:33:10 PDT
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.
Comment 7 Antti Koivisto 2021-08-25 01:34:45 PDT
Regression from https://trac.webkit.org/changeset/276882/webkit
Comment 8 Antti Koivisto 2021-08-25 01:37:34 PDT
It would be helpful if you could host the repro.
Comment 9 Thomas Ladd 2021-08-25 02:49:51 PDT
Here is the repo hosted on github pages: https://tladd.github.io/styled-components-shadow-dom-ios15-beta-bug/
Comment 10 Antti Koivisto 2021-08-25 04:13:54 PDT
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.
Comment 11 Antti Koivisto 2021-08-25 05:34:37 PDT
Created attachment 436386 [details]
Comment 12 Antti Koivisto 2021-08-25 05:50:05 PDT
Created attachment 436387 [details]
Comment 13 Antti Koivisto 2021-08-25 05:55:29 PDT
Thanks for reduction, it was very helpful.
Comment 14 Thomas Ladd 2021-08-25 07:28:22 PDT
Thanks so much for digging into this!
Comment 15 EWS 2021-08-27 10:12:48 PDT
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].