225354 2021-05-04 07:36:17 -0700 iOS 14.5 Regression CSS Variable updates are not rendered in Shadow DOM 2021-05-20 03:54:49 -0700 1 1 1 Unclassified WebKit CSS Safari 14 Unspecified Unspecified RESOLVED DUPLICATE 224261 InRadar P2 Normal --- 148695 1 ldebeasi webkit-unassigned bfulgham koivisto mdiera.dvk rniwa simon.fraser tobbi1993 webkit-bug-importer zalan oldest_to_newest 1756527 0 427663 ldebeasi 2021-05-04 07:36:17 -0700 Created attachment 427663 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. 1756567 1 webkit-bug-importer 2021-05-04 09:59:56 -0700 <rdar://problem/77511775> 1756803 2 koivisto 2021-05-04 22:19:24 -0700 Hmm, works with trunk. 1756846 3 tobbi1993 2021-05-05 01:21:49 -0700 I am also seeing this issue (color in button not updated correctly) without using shadow DOM. Here is an example: https://codepen.io/wistudent/pen/xxqKdMQ I can see in the inspector that the color property of the element is changed, but the color change is not rendered. I am having this issue on iOS 14.5.1 and macOS Safari 14.1 (16611.1.21.161.3) 1756850 4 koivisto 2021-05-05 01:32:03 -0700 This was fixed in https://commits.webkit.org/r275607 *** This bug has been marked as a duplicate of bug 224261 *** 1756857 5 koivisto 2021-05-05 01:40:08 -0700 Right, Shadow DOM and variables are incidental here. The issue is with paint invalidation in presence of pointer-events property. 1757048 6 rniwa 2021-05-05 12:46:18 -0700 Could you comment as to what kind of popular sites or frameworks are affected by this bug? 1757377 7 ldebeasi 2021-05-06 06:13:18 -0700 Currently this impacts our button component in Ionic Framework: https://github.com/ionic-team/ionic-framework/issues/23256. I have not received reports of this impacting production Ionic Framework apps, though I imagine I will receive more reports as people upgrade to iOS 14.5. 1758003 8 rniwa 2021-05-07 14:29:07 -0700 (In reply to Liam DeBeasi from comment #7) > Currently this impacts our button component in Ionic Framework: > https://github.com/ionic-team/ionic-framework/issues/23256. > > I have not received reports of this impacting production Ionic Framework > apps, though I imagine I will receive more reports as people upgrade to iOS > 14.5. Thanks for the clarification! 1758019 9 tobbi1993 2021-05-07 14:56:06 -0700 Our app uses ionic's capacitor framework as a base and vue + vuetify as UI framework. We noticed this issue in our released app after updating to iOS 14.5. The hint about the pointer-events property helped us to find a css workaround that we will ship with our next app release. 1761126 10 mdiera.dvk 2021-05-18 04:30:07 -0700 Just encountered this issue and tried setting the pointer events to unset. This worked for the CSS issue but affected the event handling. We are thinking about either leaving the pointer-events as unset and use event delegation to handle the events or go through and find the CSS variable that is getting passed into the button and affecting the style. @Tobias Trumm - Were these the css workarounds that worked for you or is there something else you could recommend? 1761127 11 mdiera.dvk 2021-05-18 04:31:03 -0700 (In reply to Tobias Trumm from comment #9) > Our app uses ionic's capacitor framework as a base and vue + vuetify as UI > framework. We noticed this issue in our released app after updating to iOS > 14.5. The hint about the pointer-events property helped us to find a css > workaround that we will ship with our next app release. Just encountered this issue and tried setting the pointer events to unset. This worked for the CSS issue but affected the event handling. We are thinking about either leaving the pointer-events as unset and use event delegation to handle the events or go through and find the CSS variable that is getting passed into the button and affecting the style. @Tobias Trumm - Were these the css workarounds that worked for you or is there something else you could recommend? 1761132 12 tobbi1993 2021-05-18 05:02:18 -0700 (In reply to Manny Diera from comment #11) > @Tobias Trumm - Were these the css workarounds that worked for you or is > there something else you could recommend? Vuetify's button implementation does set "pointer-event: none" but does not rely on it for its event handling internally, so in our case setting .v-btn--disabled { pointer-events: unset !important; cursor: default; } was enough to restore the original look and behaviour. Seeing that iOS 14.6 RC was just released, it might also be worth to check if this bug is already fixed there and if so, wait for its final release, instead of implementing your own event handling. 1761307 13 rniwa 2021-05-18 14:12:26 -0700 (In reply to Tobias Trumm from comment #12) > (In reply to Manny Diera from comment #11) > > @Tobias Trumm - Were these the css workarounds that worked for you or is > > there something else you could recommend? > > Vuetify's button implementation does set "pointer-event: none" but does not > rely on it for its event handling internally, so in our case setting > > .v-btn--disabled { > pointer-events: unset !important; > cursor: default; > } > > was enough to restore the original look and behaviour. > > > Seeing that iOS 14.6 RC was just released, it might also be worth to check > if this bug is already fixed there and if so, wait for its final release, > instead of implementing your own event handling. It's not fixed in iOS 14.6 RC. 1761720 14 ldebeasi 2021-05-19 14:59:33 -0700 This appears to be fixed in iOS 14.7 beta 1. Thank you! 1761893 15 koivisto 2021-05-20 03:54:49 -0700 Thanks for confirming, the fix should indeed be there. 427663 2021-05-04 07:36:17 -0700 2021-05-04 07:36:17 -0700 Code Reproduction index.html text/html 1890 ldebeasi PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPlNoYWRvdyBET00gLSBQ YWludCBJc3N1ZTwvdGl0bGU+CiAgICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0idmll d3BvcnQtZml0PWNvdmVyLCB3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MS4wLCBt aW5pbXVtLXNjYWxlPTEuMCwgbWF4aW11bS1zY2FsZT0xLjAsIHVzZXItc2NhbGFibGU9bm8iPgog ICAgPG1ldGEgbmFtZT0iYXBwbGUtbW9iaWxlLXdlYi1hcHAtY2FwYWJsZSIgY29udGVudD0ieWVz IiAvPgogICAgPG1ldGEgbmFtZT0iYXBwbGUtbW9iaWxlLXdlYi1hcHAtc3RhdHVzLWJhci1zdHls ZSIgY29udGVudD0iYmxhY2siIC8+CiAgICAKICAgIDxzdHlsZT4KICAgICAgYXBwLWJ1dHRvbltk aXNhYmxlZF0gewogICAgICAgIC0tY29sb3I6IHJlZDsKICAgICAgICAtLWJhY2tncm91bmQ6ICNj ZGNkY2Q7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGFwcC1i dXR0b24+TXkgQnV0dG9uPC9hcHAtYnV0dG9uPgogICAgPGJ1dHRvbiBvbmNsaWNrPSJ0b2dnbGUo KSI+VG9nZ2xlIERpc2FibGVkPC9idXR0b24+CgogICAgPHNjcmlwdD4KICAgICAgY29uc3QgYnV0 dG9uID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignYXBwLWJ1dHRvbicpOwogICAgICAKICAgICAg Y29uc3QgdG9nZ2xlID0gKCkgPT4gewogICAgICAgIGJ1dHRvbi5kaXNhYmxlZCA9ICFidXR0b24u ZGlzYWJsZWQ7CiAgICAgIH0KICAgICAgCiAgICAgICAgY3VzdG9tRWxlbWVudHMuZGVmaW5lKCdh cHAtYnV0dG9uJywgY2xhc3MgZXh0ZW5kcyBIVE1MRWxlbWVudCB7CiAgICAgICAgICBjb25zdHJ1 Y3RvcigpIHsKICAgICAgICAgICAgc3VwZXIoKTsKICAgICAgCiAgICAgICAgICAgIGNvbnN0IHJv b3QgPSB0aGlzLmF0dGFjaFNoYWRvdyh7IG1vZGU6ICdvcGVuJyB9KTsKICAgICAgCiAgICAgICAg ICAgIGNvbnN0IHN0eWxlcyA9IGAKICAgICAgICAgICAgICA8c3R5bGU+CiAgICAgICAgICAgICAg ICA6aG9zdChbZGlzYWJsZWRdKSB7CiAgICAgICAgICAgICAgICAgIHBvaW50ZXItZXZlbnRzOiBu b25lOwogICAgICAgICAgICAgICAgfQogICAgICAKICAgICAgICAgICAgICAgIGJ1dHRvbiB7CiAg ICAgICAgICAgICAgICAgIGNvbG9yOiB2YXIoLS1jb2xvcik7CiAgICAgICAgICAgICAgICAgIGJh Y2tncm91bmQ6IHZhcigtLWJhY2tncm91bmQpOwogICAgICAgICAgICAgICAgfQogICAgICAgICAg ICAgIDwvc3R5bGU+CiAgICAgICAgICAgIGA7CiAgICAgIAogICAgICAgICAgICByb290LmlubmVy SFRNTCA9IGAKICAgICAgICAgICAgICAke3N0eWxlc30KICAgICAgICAgICAgICA8YnV0dG9uIHR5 cGU9ImJ1dHRvbiI+CiAgICAgICAgICAgICAgICA8c2xvdD48L3Nsb3Q+CiAgICAgICAgICAgICAg PC9idXR0b24+CiAgICAgICAgICAgIGA7CiAgICAgICAgICB9ICAgCiAgICAgICAgICAKICAgICAg ICAgIGdldCBkaXNhYmxlZCgpIHsKICAgICAgICAgICAgY29uc3QgdmFsdWUgPSB0aGlzLmdldEF0 dHJpYnV0ZSgnZGlzYWJsZWQnKTsKICAgICAgICAgICAgcmV0dXJuIHZhbHVlID09PSAndHJ1ZScg PyB0cnVlIDogZmFsc2U7CiAgICAgICAgICB9CiAgICAgICAgICAKICAgICAgICAgIHNldCBkaXNh YmxlZCh2YWx1ZSkgewogICAgICAgICAgICBpZiAodmFsdWUpIHsKICAgICAgICAgICAgICB0aGlz LnNldEF0dHJpYnV0ZSgnZGlzYWJsZWQnLCB2YWx1ZSk7CiAgICAgICAgICAgIH0gZWxzZSB7CiAg ICAgICAgICAgICAgdGhpcy5yZW1vdmVBdHRyaWJ1dGUoJ2Rpc2FibGVkJywgdmFsdWUpOwogICAg ICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgfSk7CiAgICA8L3NjcmlwdD4KICA8L2JvZHk+ CjwvaHRtbD4K