Bug 301871 – CSS Container Style Queries: fails when container has display: contents

• Component: CSS
• Status: RESOLVED FIXED

[Steve Orvell]

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.

[Steve Orvell]

Reproduction: https://lit.dev/playground/#gist=e84af8138bb40c026ad3806be64ee227

[Radar WebKit Bug Importer]

<rdar://problem/164414720>

[Yehonatan Daniv]

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]

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.

*** Bug 303703 has been marked as a duplicate of this bug. ***

[Joel Drapper]

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]

Pull request: https://github.com/WebKit/WebKit/pull/65081

[EWS]

Committed 313677@main (93785137d0d1): <https://commits.webkit.org/313677@main>

Reviewed commits have been landed. Closing PR #65081 and removing active labels.