Bug 226330 - Shadow DOM unnecessarily invalidated on pseudo element change, causing CPU spikes
Summary: Shadow DOM unnecessarily invalidated on pseudo element change, causing CPU sp...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Blocks: 148695
  Show dependency treegraph
Reported: 2021-05-27 06:55 PDT by Liam DeBeasi
Modified: 2021-08-11 12:50 PDT (History)
4 users (show)

See Also:

Code reproduction (2.78 KB, text/html)
2021-05-27 06:55 PDT, Liam DeBeasi
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Liam DeBeasi 2021-05-27 06:55:04 PDT
Created attachment 429874 [details]
Code reproduction

This is a continuation of https://bugs.webkit.org/show_bug.cgi?id=222187 which was partially resolved in STP 125. When using Web Components inside of the Shadow DOM that have CSS Variables set on the host, there is a significant delay in response to clicks/touches. There were fixes in STP 125 that improved this issue, but I am still able to reproduce this issue in other ways.

Steps to reproduce:

1. Open code reproduction in STP 125.
2. Quickly click multiple times on the "Click Me" label (not the checkbox) and you should see Safari freeze up.
3. If you repeat step 2 while taking a Timeline sample, you should see the CPU usage spike significantly. In my tests I clicked about 4-5 times and saw the CPU spike to over 80% on average. 

Expected Behavior:

I would expect Safari to not freeze up when quickly clicking the label multiple times.

Actual Behavior:

Safari freezes up when quickly clicking the label multiple times.

Other Info:

- As noted in https://bugs.webkit.org/show_bug.cgi?id=222187, the example I used is inherently heavy in shadow trees to emphasize the issue. Please see https://github.com/ionic-team/ionic-framework/issues/22951 for more "real world" examples of this impacting applications.
Comment 1 Alexey Proskuryakov 2021-05-27 18:21:22 PDT
Thank you for the report!

Is the performance still worse than pre-iOS 14, or is this about further optimization opportunities? Does this appear to be worse in Safari (STP) than in other browsers?
Comment 2 Liam DeBeasi 2021-05-28 11:37:16 PDT
The performance of single clicking the checkbox in my example is good after https://bugs.webkit.org/show_bug.cgi?id=222187, but multiple clicks is where there are still issues. When doing multiple clicks, the performance in STP 125 is worse than in other browsers and worse than in pre-iOS/Safari 14.
Comment 3 Radar WebKit Bug Importer 2021-06-03 06:56:16 PDT
Comment 4 marc 2021-06-25 05:30:12 PDT
Hi guys, just wondered if there's been any movement on this?