RESOLVED DUPLICATE of bug 301871303703
Container style queries stop applying after user interaction when ancestor uses display: contents and defines the queried custom property 
https://bugs.webkit.org/show_bug.cgi?id=303703
Summary Container style queries stop applying after user interaction when ancestor us...
kobiz
Reported 2025-12-07 01:07:16 PST
When using a CSS container style query that depends on a custom property defined on an ancestor with display: contents, the styles inside the @container block initially apply correctly on load. After a simple user interaction (clicking the button), the styles inside the container style query stop applying. This reproduces in Safari on iOS and Chrome on iOS (WebKit-based), but not in Chrome on desktop or Android (Blink). This looks like a WebKit bug related to invalidation / reevaluation of container style queries when the container ancestor uses display: contents. Steps to Reproduce: ``` <!doctype html> <html> <head> <meta charset="utf-8" /> <title>WebKit container style query + display: contents bug</title> <style> .preset-wrapper { display: contents; --preset: pink; /* In real code this element is a style container. Even in this simplified example, WebKit initially applies the style query correctly. */ } .button { position: relative; width: 200px; height: 80px; } @container style(--preset: pink) { .button { background: pink; color: black; } } </style> </head> <body> <div class="preset-wrapper"> <button class="button" id="btn-1">Hello</button> </div> </body> </html> ``` 1. Open the page in Safari 2. Observe the initial button style when the page loads. 3. Tap / click the button once. Actual Results: On initial load: The rules inside @container style(--preset: pink) are applied. After clicking the button: The rules inside the container style query are no longer applied. Expected Results: The container style query @container style(--preset: pink) should continue to apply as long as the custom property --preset: pink remains in effect on the container ancestor. A simple user interaction (click/focus/active state on a descendant button) should not cause container style queries to stop applying.
Attachments
Add attachment proposed patch, testcase, etc.
kobiz
Comment 1 2025-12-07 03:58:38 PST
*** This bug has been marked as a duplicate of bug 301871 ***
Note You need to log in before you can comment on or make changes to this bug.