Bug 303703
| Summary: | Container style queries stop applying after user interaction when ancestor uses display: contents and defines the queried custom property | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | kobiz |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | Major | CC: | koivisto, moiseev.andy |
| Priority: | P2 | ||
| Version: | Safari 26 | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
kobiz
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
*** This bug has been marked as a duplicate of bug 301871 ***