[Webkit-unassigned] [Bug 225354] New: iOS 14.5 Regression CSS Variable updates are not rendered in Shadow DOM

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Tue May 4 07:36:17 PDT 2021


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

            Bug ID: 225354
           Summary: iOS 14.5 Regression CSS Variable updates are not
                    rendered in Shadow DOM
           Product: WebKit
           Version: Safari 14
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: ldebeasi at gmail.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Created attachment 427663

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

Code Reproduction

When changing the value of a CSS Variable on a Web Component using Shadow DOM, WebKit does not always render this updated variable value.

Steps to reproduce:

1. Open attached code reproduction on Safari 14.1 (macOS or iOS 14.5 works).
2. On the left you should see a Web Component that says "My Button". On the right you should see a button that says "Toggle Disabled".
3. Tap the "Toggle Disabled" button. This will set the `disabled` attribute on the Web Component. Observe that the background color of the Web Component changes to gray, but the text color remains the same.

Repeat these steps on iOS 14.4 and you should notice that the text color becomes red when tapping the "Toggle Disabled" button.

Expected Behavior:

I would expect that the Web Component text color becomes red.

Actual Behavior:

The Web Component text color remains dark gray.

Other Information:

- iOS 14.4 and older are working as expected.
- This issue does not reproduce on Chrome 90 or Firefox 88.
- Removing "pointer-events" from the host styles causes the rendering to work as expected.
- When evaluating the value of `--color` in Safari Dev Tools on the `button` element inside of the shadow root, the value is correctly evaluated to "red", but the text color remains rendered as dark gray.

-- 
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/20210504/f4e3c4c9/attachment.htm>


More information about the webkit-unassigned mailing list