Bug 249706

Summary: The :checked pseudoselector for slotted content fails to repaint
Product: WebKit Reporter: Istvan Tutto <istvantutto>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: akeerthi, elwinvaneede+bugzilla, koivisto, me, ntim, rniwa, robin, simon.fraser, vzemtsov, webkit-bug-importer, wenson_hsieh, zalan
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: Mac (Intel)   
OS: macOS 11   
URL: https://codepen.io/istutto/pen/eYjmywN
Bug Depends on:    
Bug Blocks: 148695    
Attachments:
Description Flags
Reduction none

Istvan Tutto
Reported 2022-12-21 03:45:07 PST
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 {} ```
Attachments
Reduction (1.03 KB, text/html)
2022-12-29 13:55 PST, Ryosuke Niwa 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2022-12-28 03:46:16 PST
<rdar://problem/103740708>
Ryosuke Niwa
Comment 2 2022-12-29 13:55:22 PST
Created attachment 464251 [details] Reduction
Ryosuke Niwa
Comment 3 2022-12-29 14:02:37 PST
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...
alan
Comment 4 2022-12-29 14:42:47 PST
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>
Ryosuke Niwa
Comment 5 2022-12-29 14:44:12 PST
I think something in the paint invalidation logic is failing to take slotted content into account.
alan
Comment 6 2022-12-29 14:55:16 PST
The render tree does not seem to get notified about the style change :|
Istvan Tutto
Comment 7 2024-05-16 04:58:27 PDT
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.
vzemtsov
Comment 8 2024-12-20 08:30:50 PST
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.
me
Comment 9 2025-01-14 06:45:02 PST
(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.
Elwin van Eede
Comment 10 2025-02-12 04:33:07 PST
I'm also running into this issues with slotted radio buttons (`<input type="radio">`), see this minimal reproduction: https://codepen.io/elwinvaneede/pen/QwWWYLM.
Note You need to log in before you can comment on or make changes to this bug.