Created attachment 429874 [details]
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.
I would expect Safari to not freeze up when quickly clicking the label multiple times.
Safari freezes up when quickly clicking the label multiple times.
- 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.
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?
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.
Hi guys, just wondered if there's been any movement on this?