| Summary: | Redraw not happening when host classes updated and element in shadow DOM now matches css selector | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | James Reed <james.reed01> | ||||
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> | ||||
| Status: | NEW --- | ||||||
| Severity: | Normal | CC: | ahmad.saleem792, ap, bfulgham, noah, simon.fraser, webkit-bug-importer, zalan | ||||
| Priority: | P2 | Keywords: | InRadar | ||||
| Version: | Safari 16 | ||||||
| Hardware: | Mac (Intel) | ||||||
| OS: | macOS 13 | ||||||
| Attachments: |
|
||||||
bug.html is the attachment "A demonstration of the bug" Thank you for the report! I cannot reproduce this, but I only tried a much newer build. Could you please check with the latest Safari Technology Preview? This issue is not seen in: Safari Technology Preview Release 170 (Safari 16.4, WebKit 18616.1.14.5) Safari Technology Preview 175 seems to be broken with test case and clicking does not change color but WebKit ToT (266380@main) seems to work fine, so it might be something fixed in upstream. I ran into this in a slightly different context, but am definitely seeing it in Safari 16.5 (17615.2.9.11.6, 17615).
Two odd observations:
1. It only occurs when the file is loaded from a web server. Opening it via `file://` doesn’t have the bug.
2. Adding an empty `:host {}` style rule fixes the problem. (This is how I fixed the issue when I ran into it.)
|
Created attachment 466478 [details] A demonstration of the bug See attached example bug.html The example contains a custom element my-element which contains a div with a background colour of red. This div has the following css selector :host(.makeGreen) div applied to it so when the custom element gets the makeGreen class, the div background turns from red to green. Click on the custom my-element in bug.html. This applies the makeGreen class to the custom element and therefore the background colour of the div inside the custom element should change from red to green. However, the background colour of the div inside the custom element remains red. It looks like the correct styling is being applied in the inspector but a redraw has not happened. Forcing a redraw, that is, uncommenting the code commented out in the bug.html results in the correct functionality. This bug is also observed not just with background-color but other properties such as object-fit. Observed on: Safari Version 16.5 (18615.2.9.11.4) on macOS Ventura 13.4 Safari Version 16.4 (18615.1.26.110.1) on macOS Ventura 13.3.1 (a) Safari Version 16.4.1 (16615.26.101.10 16615) on macOs Big Sur