Bug 301871

Summary: CSS Container Style Queries: fails when container has display: contents
Product: WebKit Reporter: Steve Orvell <steveorvell>
Component: CSSAssignee: Ahmad Saleem <ahmad.saleem792>
Status: RESOLVED FIXED    
Severity: Normal CC: joel, karlcow, kobiz, koivisto, maggotfish, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 26   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=306237
https://github.com/web-platform-tests/wpt/pull/60070
Attachments:
Description Flags
container style query with display contents none

Steve Orvell
Reported 2025-11-03 10:19:30 PST
Created attachment 477264 [details] container style query with display contents Given the following setup: 1. a container defines a CSS custom property and has `display: contents` 2. a style query uses the custom property to apply a property to a contained element 3. the contained element changes styling dynamically, e.g. via a :hover rule applying Expected: the contained element maintains the property set via the container style query. Actual: the contained element loses the property set via the container style query.
Attachments
container style query with display contents (317 bytes, text/plain)
2025-11-03 10:19 PST, Steve Orvell
no flags
Steve Orvell
Comment 1 2025-11-03 10:20:38 PST
Radar WebKit Bug Importer
Comment 2 2025-11-10 10:20:13 PST
Yehonatan Daniv
Comment 3 2025-11-12 23:03:14 PST
This is also affecting us at Wix with future stuff we want to build, not really affecting current sites, but it's blocking us.
Karl Dubost
Comment 4 2025-11-12 23:24:01 PST
Thanks Steve and Yehonatan I can reproduce the issue on latest Safari and STP 231. The second block loose the background-color after the hover.
kobiz
Comment 5 2025-12-07 03:58:38 PST
*** Bug 303703 has been marked as a duplicate of this bug. ***
Joel Drapper
Comment 6 2026-05-12 07:43:30 PDT
I found a workaround. If you set a property when interacting with an element inside the `display: contents` element, it seems to sufficiently force Safari to apply the container query again. .contents { display: contents; --contents-cache-key: 0; &:has(:hover) { --contents-cache-key: 0; } &:has(:focus-within) { --contents-cache-key: 0; } &:has(:active) { --contents-cache-key: 0; } }
Ahmad Saleem
Comment 7 2026-05-17 18:59:14 PDT
EWS
Comment 8 2026-05-21 09:46:27 PDT
Committed 313677@main (93785137d0d1): <https://commits.webkit.org/313677@main> Reviewed commits have been landed. Closing PR #65081 and removing active labels.
Note You need to log in before you can comment on or make changes to this bug.