Bug 297591 – REGRESSION (294191@main): Extremely slow applying a large style

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

Created attachment 476450 [details]
Slow UI updates on Webkit 2.48.5

Hello there, hopefully this is the right place for reporting this issue.

At work, after some of our users upgraded their iPads to the most recent version which ships with Safari 18.6, they started to notice orders of magnitude slower page load times for some of our internal websites as well as certain widgets being extremely slow to react to user interactions (toggling things on/off on the UI for instance), whereas the same websites on the previous Safari version 18.5 work fine.

We were able to confirm that same behavior on webviews running in our native iPad app as well as Safari browser on MacOS.

After some research and experimenting, we were able to reproduce the slower behavior on webkit 2.48.5 itself on a Linux machine, so it seems the issue may be deeper in the stack and not necessarily specific to Safari.

We were able to pinpoint the problem to the fact that these internal websites load a massive CSS file, with possibly expensive CSS selectors. We can reproduce the slowness with [this CodeSandbox](https://codesandbox.io/p/sandbox/3c8rp5?file=%2Fsrc%2Findex.html%3A9%2C15) where the first interaction with any of the buttons on the page is extremely slow. Subsequent clicks will cause UI updates to apply right away.

A few things to note:

1. Safari 18.6 we can experience the slowness;
2. Safari 18.5 no slowness is experienced;
3. Webkit version where we seem to be able to reproduce the slowness: 2.48.5;
4. Webkit version where everything seems to be Ok: 2.48.4;

Attached, we have two GIFs showing a similar CodeSandbox test on a Linux machine for webkit 2.48.4 vs 2.48.5.

Even though the massive CSS file needs improvements, we are wondering if this slowness is considered a regression and would require some attention.

Let me know if I can provide further information on the issue and thanks in advance.

Created attachment 476451 [details]
Slow UI Updates Safari 18.6

[Alexey Proskuryakov]

I can reproduce with macOS 26 beta. Indeed, a lot of time spent under AttributeChangeInvalidation::invalidateStyle. Chrome doesn't have this problem.

[Radar WebKit Bug Importer]

<rdar://problem/158700409>

[Antti Koivisto]

This is a regression from https://commits.webkit.org/294191@main. The page has a massive stylesheet and the slowness happens on the first click when we build an invalidation RuleSet for an attribute. 

The building involves adding selectors to a SelectorList 

                invalidationRuleSet.invalidationSelectors = CSSSelectorList::makeJoining(invalidationRuleSet.invalidationSelectors, feature.invalidationSelector);

Adding selectors to the list this way is O(n^2) to the list length. The page uses large number of attribute selectors on ‘class’ attribute (like [class*=\"advanced-table-responsive-scroll\”]). The list grows to ~20000 entries and this gets rather slow.

[Antti Koivisto]

Repro

<style id=s></style>
<div id=t></div>
<script>
function makeStylesheet(count) {
    let text = "";
    for (let i = 0; i < count; ++i)
        text += [class *= v${i}] { color: rgb(${Math.round(i / count*25500)/100}, 0, 0) }\n;
    return text;
}
s.textContent = makeStylesheet(20000);
t.offsetTop;
t.classList.add("foo");
</script>

[Antti Koivisto]

Pull request: https://github.com/WebKit/WebKit/pull/49718

[EWS]

Committed 299018@main (0ac2f442652f): <https://commits.webkit.org/299018@main>

Reviewed commits have been landed. Closing PR #49718 and removing active labels.

[Simon Fraser (smfr)]

*** Bug 298222 has been marked as a duplicate of this bug. ***

[Neetu]

Is that current status what I understood from above conversation:

The fix for the WebKit regression (slow UI updates due to large CSS selectors) was committed in WebKit revision 299018@main.
The fix has not yet shipped in Safari 18.6 (released July 29, 2025).
It is included in Safari Technology Preview 218, which is available for macOS Sequoia and Sonoma.
The next stable Safari version that may include this fix is Safari 26, currently in beta as of August 5, 2025.

Could you please confirm when the fix for this issue will be available in a stable Safari release, so I can inform the team accordingly?

[Neetu]

Would it be possible for us to provide a temporary solution on our end? Could you please suggest any feasible options?

[Neetu]

All APIs are experiencing significant delays while loading the page each taking approximately 24 seconds. As a result, the page fails to load properly. Could you please look into this or suggest any possible optimizations or temporary workarounds?

[Neetu]

[e-mail]
[e-mail]

[Neetu]

Is there any way for us to debug this issue or check the logs? Can we investigate it further to propose a solution, since we haven’t been able to identify the root cause yet? We already tried blocking the API calls that were causing delays, but it didn’t have any impact on the speed.
Is there any way we can optimize or improve the CSS selectors to enhance styling performance? Please suggest.

[Alexey Proskuryakov]

*** Bug 298323 has been marked as a duplicate of this bug. ***

[Simon Fraser (smfr)]

The commit message explains that this slowdown is caused by CSS with lots of attribute selectors, like:

[someattr *= foo1]
[someattr *= foo2]

So I suggest looking at the CSS on https://www.dentsplysirona.com/de-de and removing these when possible.

[Simon Fraser (smfr)]

Using Chrome's Selector Stats I see that there are a lot of selectors that include:

[class*="cmp-text"]

on this page which could explain the issue.

[Antti Koivisto]

*** Bug 298744 has been marked as a duplicate of this bug. ***

This issue still remains with both the recently released 18.7 iOS and the 26.0 release.  Is there any update on when this could be addressed?

[Ryosuke Niwa]

*** Bug 299295 has been marked as a duplicate of this bug. ***