[Webkit-unassigned] [Bug 222187] New: Using Web Components with large quantities of CSS Variables in Shadow DOM results in performance issues

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=222187

            Bug ID: 222187
           Summary: Using Web Components with large quantities of CSS
                    Variables in Shadow DOM results in performance issues
           Product: WebKit
           Version: Safari 14
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: ldebeasi at gmail.com

Created attachment 421007

  --> https://bugs.webkit.org/attachment.cgi?id=421007&action=review

Code Reproduction

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. It seems to be related to the number of instances of the component as well as the number of CSS Variables set on the host.

I am only able to reproduce this on iOS 14.0+. This performance issue does not appear on earlier versions of iOS. I can also reproduce this on Safari 14 on macOS, but it is a bit easier to reproduce on iOS.

Steps to reproduce:

1. Open code reproduction on an iOS device running iOS 14.
2. Tap the "Click Me" checkbox label. Notice that there is a delay between when the tap highlight appears and when the checkbox becomes checked.

Repeat this process on a device running iOS 13 and you should notice that this delay does not occur.

Additional Information:

- I can reproduce this on STP 120 as well as iOS 14.5.
- I cannot reproduce this in Chrome 88.
- I took a Timeline sample and it appears that WebKit is spending significant amounts of time doing Style Recalculations whenever you try to check the checkbox.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20210219/dcb1bdb7/attachment.htm>