Bug 307984 – container-type: inline-size breaks media query re-evaluation on viewport resize (pure css - no javascript)

• Status: NEW
• Component: CSS

[Jan Nicklas]

Created attachment 478372 [details]
Minimal CSS Bug Reproduction as single HTML file (no javascript, no external assets)

When a page contains an element with container-type: inline-size (even an empty unrelated div), media queries that change grid column assignments stop working on viewport resize. 
The styles are correct on initial page load but never update when you resize the browser window. Reloading the page applies the correct styles for the new viewport size, but then resizing again gets stuck on the stale styles.

I narrowed it down to three conditions:

1. Any element with container-type: inline-size in the DOM (does not need to be related to the grid at all)
2. Media queries that reassign grid-column values
3. A viewport-relative height on an ancestor (e.g. min-height: 100vh or height: 100vh)

Removing any one of these fixes the issue.
 Using a fixed height like min-height: 100px instead of a viewport-relative unit also fixes it, so it seems specific to viewport units in the height calculation.

Steps to reproduce:

1. Open the attached test case at a viewport width below 992px (e.g. 900px)
2. The sidebar is hidden -- this is correct
3. Resize the viewport to above 992px (e.g. 1200px)
4. The sidebar is still hidden -- this is wrong, the media query should show it
5. Reload the page at 1200px
6. The sidebar now appears correctly
7. Resize back below 992px
8. The sidebar stays visible -- again wrong

Test case: attached (single self-contained HTML file no Javascript)

Tested on:
- Safari 26.3 (WebKit 21623.2.7.11.6) on macOS Tahoe
- Safari Technology Preview Release 237 (WebKit 21625.1.3.19.2)
- Also reproducible on BrowserStack: Safari 26.2 on macOS Tahoe

Reproduction (also attached): https://www.jnicklas.de/bugs/safari/container-type-media-query.html
https://live.browserstack.com/dashboard#os=OS+X&os_version=Tahoe&browser=Safari&browser_version=26.2&zoom_to_fit=true&full_screen=true&url=https://www.jnicklas.de/bugs/safari/container-type-media-query.html

Chrome and Firefox render correctly

[Radar WebKit Bug Importer]

<rdar://problem/170984388>

[Rob Brackett]

I am running into a similar issue, though I would broaden these conditions a bit:

1. Neither grid not flex need to be involved at all.
2. Usage of *any* viewport units (vw, vh, vmin, vmax, dvh, dvw) for any CSS property causes the issue.

For example, in the originally attached test case, you could get rid of all the grid and flex declarations (use `display: none` to show/hide the "sidebar" instead of setting grid columns) and still have the issue. You could also get rid of the `min-height: 100vh` declaration on the page and put `font-size: 2dvw;` on any element and get the same result.

It also seems like the media queries *do* get evaluated — but only when a container query matches. Adding a container query to the page will cause the media query to get evaluated when the container query matches or unmatches.

[Rob Brackett]

Created attachment 478508 [details]
Simpler test case focusing on viewport units without grid

I’ve attached another test case, but this one drops the grid stuff and focuses on just viewport units + container + media query. Hopefully this is helpful in narrowing down the cause.

[Rob Brackett]

Sorry, forgot to mention, tested on:
- Safari 26.3 (20623.2.7.18.1) running on macOS Sequoia 15.7.4 (24G517) on M1 Pro
- Safari Technology Preview Release 237 (WebKit 20625.1.3.19.2) on macOS Sequoia 15.7.4 (24G517) on M1 Pro

Same releases as the original poster, slightly different build and OS.

[Karl Dubost]

Confirmed container query changes status, but not media query.
Once it becomes inactive, it doesn't become active again, except if reloading the page.
Thanks for the useful test case.