249706 2022-12-21 03:45:07 -0800 The :checked pseudoselector for slotted content fails to repaint 2025-02-12 04:33:07 -0800 1 1 1 Unclassified WebKit CSS Safari 15 Mac (Intel) macOS 11 NEW https://codepen.io/istutto/pen/eYjmywN InRadar P2 Normal --- 148695 1 istvantutto webkit-unassigned akeerthi elwinvaneede+bugzilla koivisto me ntim rniwa robin simon.fraser vzemtsov webkit-bug-importer wenson_hsieh zalan oldest_to_newest 1921034 0 istvantutto 2022-12-21 03:45:07 -0800 Hey team! I've noticed that a checkbox element's :checked state styles will not be immediately applied when using a keyboard (SPACE) to select it and the styles are coming from within a ShadowDom's `::slotted(...)` selector. The styles will be applied after blur event only. The pointer interaction works as expected and all other major browsers handle the keyboard event as well. Demonstration in link: https://codepen.io/istutto/pen/eYjmywN Note, that the above mentioned case will be resolved in Safari as well if the following empty rule as added into the light-DOM. ```css input[type=checkbox]:checked {} ``` 1922074 1 webkit-bug-importer 2022-12-28 03:46:16 -0800 <rdar://problem/103740708> 1922220 2 464251 rniwa 2022-12-29 13:55:22 -0800 Created attachment 464251 Reduction 1922221 3 rniwa 2022-12-29 14:02:37 -0800 This seems to be a repaint bug. The attached test case uses Element::click() to mark the checkbox (instead of requiring keyboard input from user). The checkbox turns blue as expected once you hover over the associated label, deactivate the window, etc... 1922227 4 zalan 2022-12-29 14:42:47 -0800 interestingly it works fine when no customElements are involved. <style> input[type=checkbox] { appearance: none; width: 50px; height: 50px; } input[type=checkbox]:checked { background-color: green; } </style> <script> onload = () => { checkbox.focus(); setTimeout(() => checkbox.click(), 0); } </script> <input type=checkbox id=checkbox> 1922229 5 rniwa 2022-12-29 14:44:12 -0800 I think something in the paint invalidation logic is failing to take slotted content into account. 1922231 6 zalan 2022-12-29 14:55:16 -0800 The render tree does not seem to get notified about the style change :| 2035753 7 istvantutto 2024-05-16 04:58:27 -0700 Hello, A kindly reminder that this bug has been reported around 18 months ago and the bug still exists in the latest versions as well. 2083315 8 vzemtsov 2024-12-20 08:30:50 -0800 Hi, I am also experiencing this issue with the same prerequisites: custom styles, shadow root. I try to change the checkbox state by calling `.click()` on it, and the state changes, but the UI is not refreshed. The same happens if I use `.checked` property programmatically: state changes, but the visual appearance does not. 2087043 9 me 2025-01-14 06:45:02 -0800 (In reply to vzemtsov from comment #8) > Hi, I am also experiencing this issue with the same prerequisites: custom > styles, shadow root. > I try to change the checkbox state by calling `.click()` on it, and the > state changes, but the UI is not refreshed. The same happens if I use > `.checked` property programmatically: state changes, but the visual > appearance does not. I can confirm the exact behaviour, as described. Would be nice to get this fixed at some point. 2094116 10 elwinvaneede+bugzilla 2025-02-12 04:33:07 -0800 I'm also running into this issues with slotted radio buttons (`<input type="radio">`), see this minimal reproduction: https://codepen.io/elwinvaneede/pen/QwWWYLM. 464251 2022-12-29 13:55:22 -0800 2022-12-29 13:55:22 -0800 Reduction bug249706.html text/html 1058 rniwa PCFET0NUWVBFIGh0bWw+CjxzdHlsZT4KCi8qIFVuY29tbWVudCB0aGUgZm9sbG93aW5nIHRvIHJl c29sdmUgdGhlIGJ1ZyBpbiBTYWZhcmkuCmlucHV0W3R5cGU9Y2hlY2tib3hdOmNoZWNrZWQge30g Ki8KCjwvc3R5bGU+CjxzY3JpcHQ+CmNsYXNzIElucHV0V3JhcHBlckVsZW1lbnQgZXh0ZW5kcyBI VE1MRWxlbWVudCB7CiAgY29uc3RydWN0b3IoKSB7CiAgICBzdXBlcigpOwogICAgdGhpcy5hdHRh Y2hTaGFkb3coe21vZGU6ICdvcGVuJ30pLmlubmVySFRNTCA9IGAKICAgIDxzdHlsZT4KICAgICAg OjpzbG90dGVkKGlucHV0W3R5cGU9Y2hlY2tib3hdKSB7CiAgICAgICAgYXBwZWFyYW5jZTpub25l OwogICAgICAgIHdpZHRoOiAxcmVtOwogICAgICAgIGhlaWdodDogMXJlbTsKICAgICAgICBib3Jk ZXItcmFkaXVzOiAycHg7CiAgICAgICAgYm9yZGVyOiAycHggc29saWQgZ3JleTsKICAgICAgICBt YXJnaW4tYm90dG9tOiAtLjEyNXJlbTsKICAgICAgfQogICAgICA6OnNsb3R0ZWQoaW5wdXRbdHlw ZT1jaGVja2JveF06Y2hlY2tlZCkgewogICAgICAgIGJvcmRlci1jb2xvcjogYmx1ZTsKICAgICAg ICBiYWNrZ3JvdW5kLWNvbG9yOiBibHVlOwogICAgICB9CiAgICA8L3N0eWxlPgogICAgPHNsb3Q+ PC9zbG90PgogICAgYAogIH0KfQoKY3VzdG9tRWxlbWVudHMuZGVmaW5lKCdpbnB1dC13cmFwcGVy JywgSW5wdXRXcmFwcGVyRWxlbWVudCk7Cm9ubG9hZCA9ICgpID0+IHsKICBjaGVja2JveC5mb2N1 cygpOwogIHNldFRpbWVvdXQoKCkgPT4gY2hlY2tib3guY2xpY2soKSwgMCk7Cn0KPC9zY3JpcHQ+ CjxpbnB1dC13cmFwcGVyPgogIDxpbnB1dCB0eXBlPWNoZWNrYm94IGlkPWNoZWNrYm94IG9uY2hh bmdlPSdyZXN1bHQudGV4dENvbnRlbnQ9dGhpcy5jaGVja2VkID8gImNoZWNrZWQiIDogInVuY2hl Y2tlZCInIGF1dG9mb2N1cz4KICA8bGFiZWwgZm9yPWNoZWNrYm94PlRoaXMgY2hlY2tib3ggc2hv dWxkIGJlIGJsdWU8bGFiZWw+CjwvaW5wdXQtd3JhcHBlcj4KPGRpdj5DaGVja2JveCBzdGF0ZTog PHNwYW4gaWQ9InJlc3VsdCI+PC9zcGFuPjwvZGl2Pgo=