307984 2026-02-16 07:50:18 -0800 container-type: inline-size breaks media query re-evaluation on viewport resize (pure css - no javascript) 2026-03-26 08:45:05 -0700 1 1 1 Unclassified WebKit CSS Safari 26 Mac (Apple Silicon) macOS 26 RESOLVED DUPLICATE 310086 InRadar P2 Normal --- 1 j.nicklas webkit-unassigned karlcow koivisto rob webkit-bug-importer oldest_to_newest 2182071 0 478372 j.nicklas 2026-02-16 07:50:18 -0800 Created attachment 478372 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 2184067 1 webkit-bug-importer 2026-02-23 07:51:11 -0800 <rdar://problem/170984388> 2185405 2 rob 2026-02-26 19:20:52 -0800 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. 2185441 3 478508 rob 2026-02-26 22:00:10 -0800 Created attachment 478508 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. 2185443 4 rob 2026-02-26 22:06:23 -0800 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. 2190792 5 karlcow 2026-03-16 18:18:40 -0700 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. 2193947 6 koivisto 2026-03-26 08:45:05 -0700 Thanks for the great test case. Turns out this fixed recently in <https://commits.webkit.org/309470@main>. A combination of media queries, viewport units and any feature that uses interleaved layout (anchor positioning in the other bug, cq here) triggers the bug. *** This bug has been marked as a duplicate of bug 310086 *** 478372 2026-02-16 07:50:18 -0800 2026-02-16 07:50:18 -0800 Minimal CSS Bug Reproduction as single HTML file (no javascript, no external assets) container-type-media-query.html text/html 1788 j.nicklas PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KPG1ldGEgY2hhcnNldD0idXRmLTgiPgo8bWV0 YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoIj4KPHRpdGxlPlNh ZmFyaSBidWc6IGNvbnRhaW5lci10eXBlIGJyZWFrcyBncmlkICsgbWVkaWEgcXVlcnkgb24gcmVz aXplPC90aXRsZT4KPHN0eWxlPgogICogeyBtYXJnaW46IDA7IHBhZGRpbmc6IDA7IGJveC1zaXpp bmc6IGJvcmRlci1ib3g7IH0KCiAgLnBhZ2UgewogICAgZGlzcGxheTogZmxleDsKICAgIGZsZXgt ZGlyZWN0aW9uOiBjb2x1bW47CiAgICBoZWlnaHQ6IDEwMHZoOwogIH0KCiAgLmdyaWQgewogICAg ZGlzcGxheTogZ3JpZDsKICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogMjAwcHggMWZyOwogIH0K CiAgLnNpZGViYXIgewogICAgZ3JpZC1jb2x1bW46IDE7CiAgICBncmlkLXJvdzogMTsKICAgIGJh Y2tncm91bmQ6IGxpZ2h0Ymx1ZTsKICAgIHBhZGRpbmc6IDE2cHg7CiAgfQoKICBAbWVkaWEgKG1h eC13aWR0aDogOTkxcHgpIHsKICAgIC5zaWRlYmFyIHsKICAgICAgZ3JpZC1jb2x1bW46IDEgLyAz OwogICAgfQogIH0KCiAgLm1haW4gewogICAgZ3JpZC1jb2x1bW46IDEgLyAzOwogICAgZ3JpZC1y b3c6IDE7CiAgICBiYWNrZ3JvdW5kOiBwaW5rOwogICAgcGFkZGluZzogMTZweDsKICAgIG1pbi1o ZWlnaHQ6IDQwMHB4OwogIH0KCiAgQG1lZGlhIChtaW4td2lkdGg6IDk5MnB4KSB7CiAgICAubWFp biB7CiAgICAgIGdyaWQtY29sdW1uOiAyOwogICAgfQogIH0KPC9zdHlsZT4KPC9oZWFkPgo8Ym9k eT4KICA8IS0tCiAgICBTYWZhcmkgYnVnOiBjb250YWluZXItdHlwZSBlbGVtZW50IHByZXZlbnRz IGdyaWQgbGF5b3V0IGZyb20KICAgIHJlY2FsY3VsYXRpbmcgYWZ0ZXIgd2luZG93IHJlc2l6ZSBh Y3Jvc3MgbWVkaWEgcXVlcnkgYnJlYWtwb2ludHMuCgogICAgU3RlcHMgdG8gcmVwcm9kdWNlOgog ICAgMS4gT3BlbiBpbiBTYWZhcmkgYXQgd2luZG93IHdpZHRoIDwgOTkycHggKG1vYmlsZSkuCiAg ICAgICBSZXN1bHQ6IFNpZGViYXIgaGlkZGVuICh0cmFuc2xhdGVYKC0xMDAlKSksIHBpbmsgbWFp biBjb250ZW50IGZpbGxzIHBhZ2UuIENPUlJFQ1QuCiAgICAyLiBSZXNpemUgd2luZG93IHRvIHdp ZHRoID4gOTkycHggKGRlc2t0b3ApLgogICAgICAgUmVzdWx0OiBMaWdodCBibHVlIHNpZGViYXIg YXBwZWFycywgcGluayBtYWluIGNvbnRlbnQgaW4gY29sdW1uIDIuIENPUlJFQ1QuCiAgICAzLiBS ZWxvYWQgdGhlIHBhZ2UgYXQgZGVza3RvcCB3aWR0aC4KICAgIDQuIFJlc2l6ZSB3aW5kb3cgYmFj ayB0byB3aWR0aCA8IDk5MnB4IChtb2JpbGUpLgogICAgICAgUmVzdWx0OiBCVUcg4oCUIHNpZGVi YXIgcmVtYWlucyB2aXNpYmxlLCBtYWluIGNvbnRlbnQgZG9lc24ndCByZWNsYWltIGZ1bGwgd2lk dGguCgogICAgRXhwZWN0ZWQ6IFN0ZXAgNCBzaG91bGQgbG9vayBpZGVudGljYWwgdG8gc3RlcCAx LgogICAgV29ya2Fyb3VuZDogUmVtb3ZlIHRoZSBjb250YWluZXItdHlwZSBkaXYgYmVsb3cuCiAg LS0+CiAgPGRpdiBzdHlsZT0iY29udGFpbmVyLXR5cGU6IGlubGluZS1zaXplIj48L2Rpdj4KCiAg PGRpdiBjbGFzcz0icGFnZSI+CiAgICA8aGVhZGVyPkhlYWRlcjwvaGVhZGVyPgogICAgPGRpdiBj bGFzcz0iZ3JpZCI+CiAgICAgIDxuYXYgY2xhc3M9InNpZGViYXIiPlNpZGViYXI8L25hdj4KICAg ICAgPG1haW4gY2xhc3M9Im1haW4iPk1haW4gQ29udGVudDwvbWFpbj4KICAgIDwvZGl2PgogIDwv ZGl2Pgo8L2JvZHk+CjwvaHRtbD4K 478508 2026-02-26 22:00:10 -0800 2026-02-26 22:00:10 -0800 Simpler test case focusing on viewport units without grid safari-container-media-query-viewport-units-simpler.html text/html 2427 rob PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KPG1ldGEgY2hhcnNldD0idXRmLTgiPgo8bWV0 YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoIj4KPHRpdGxlPlNh ZmFyaSBidWc6IGNvbnRhaW5lci10eXBlIGJyZWFrcyBxdWVyeSB3aGVuIHZpZXdwb3J0IHVuaXRz IGFyZSBpbiB1c2U8L3RpdGxlPgo8c3R5bGU+CiAgYm9keSB7IG1hcmdpbjogMDsgfQoKICAjaW5z dHJ1Y3Rpb25zIHsKICAgIGJhY2tncm91bmQ6IGxpZ2h0Z3JheTsKICAgIHBhZGRpbmc6IDE2cHg7 CiAgfQoKCiAgI3Rlc3QtY29udGFpbmVyIHsKICAgIGJhY2tncm91bmQ6IGxpZ2h0Ymx1ZTsKICAg IHBhZGRpbmc6IDFyZW0gMDsKICAgIGNvbnRhaW5lcjogdGVzdC1jb250YWluZXIgLyBpbmxpbmUt c2l6ZTsKICB9CgogICNjb250YWluZXItcXVlcnktaW5mbzo6YmVmb3JlIHsgY29udGVudDogJ0Nv bnRhaW5lciBxdWVyeSAid2lkdGggPiA2MDBweCIgJzsgfQogICNjb250YWluZXItcXVlcnktaW5m bzo6YWZ0ZXIgeyBjb250ZW50OiAnKGluYWN0aXZlKSc7IH0KICBAY29udGFpbmVyIHRlc3QtY29u dGFpbmVyICh3aWR0aCA+IDYwMHB4KSB7CiAgICAjY29udGFpbmVyLXF1ZXJ5LWluZm86OmFmdGVy IHsgYmFja2dyb3VuZDogb3JhbmdlOyBjb250ZW50OiAiKGFjdGl2ZSkiOyB9CiAgfQoKCiAgI21l ZGlhLWNvbnRhaW5lciB7CiAgICBiYWNrZ3JvdW5kOiBwaW5rOwogICAgcGFkZGluZzogMTZweDsK CiAgICAvKiBJc3N1ZSBvbmx5IG9jY3VycyBpZiB2aWV3cG9ydCB1bml0cyBhcmUgYmVpbmcgdXNl ZCBzb21ld2hlcmUuCiAgICAgICBDb21tZW50IHRoaXMgb3V0IHRvIGdldCBleHBlY3RlZCBiZWhh dmlvciBpbnN0ZWFkIG9mIHRoZSBidWcuICovCiAgICBmb250LXNpemU6IG1heCgxcmVtLCAwLjJ2 dyk7CiAgfQoKICAjbWVkaWEtcXVlcnktaW5mbzo6YmVmb3JlIHsgY29udGVudDogJ01lZGlhIHF1 ZXJ5ICJ3aWR0aCA+IDgwMHB4IiAnOyB9CiAgI21lZGlhLXF1ZXJ5LWluZm86OmFmdGVyIHsgY29u dGVudDogJyhpbmFjdGl2ZSknOyB9CiAgQG1lZGlhICh3aWR0aCA+IDgwMHB4KSB7CiAgICAjbWVk aWEtcXVlcnktaW5mbzo6YWZ0ZXIgeyBiYWNrZ3JvdW5kOiBvcmFuZ2U7IGNvbnRlbnQ6ICIoYWN0 aXZlKSI7IH0KICB9Cjwvc3R5bGU+CjwvaGVhZD4KPGJvZHk+CiAgPGRpdiBpZD0iaW5zdHJ1Y3Rp b25zIj4KICAgIDxwPgogICAgICBXaGVuIHRoZSBwYWdlIHVzZXMgdmlld3BvcnQgdW5pdHMgKHZ3 LCB2aCwgdmltLCB2bWF4LCBkdncsIGR2aCkgYW5kIHRoZXJlCiAgICAgIGlzIGEgQ1NTIGBjb250 YWluZXJgIG9uIHRoZSBwYWdlLCBtZWRpYSBxdWVyaWVzIGRvIG5vdCBnZXQgZXZhbHVhdGVkIGFz CiAgICAgIHRoZSB3aW5kb3cgY2hhbmdlcyBzaXplLiBJbnN0ZWFkIHRoZXkgYXJlIGV2YWx1YXRl ZCB3aGVuIGEgY29udGFpbmVyIHF1ZXJ5CiAgICAgIG1hdGNoZXMgb3IgdW5tYXRjaGVzLgogICAg PC9wPgogICAgPHA+CiAgICAgIFRoaXMgcGFnZSBoYXMgYSBtZWRpYSBxdWVyeSB0aGF0IGlzIGFj dGl2ZSBhdCB3aW5kb3cgd2lkdGhzICZndDsgODAwcHggYW5kCiAgICAgIGEgY29udGFpbmVyIHF1 ZXJ5IHRoYXQgaXMgYWN0aXZlIGF0IHdpbmRvdyB3aWR0aCAmZ3Q7IDYwMHB4LiBXaGVuIGEgcXVl cnkKICAgICAgaXMgYWN0aXZlLCBpdCB3aWxsIGhhdmUgdGhlIHRleHQgIihhY3RpdmUpIiBhZnRl ciBpdHMgbGlzdGluZyBiZWxvdy4KICAgIDwvcD4KICAgIDxwPgogICAgICBUbyByZXByb2R1Y2Us IHJlZnJlc2ggd2l0aCBhIHdpbmRvdyB3aWR0aCAmZ3Q7IDgwMHB4LiBCb3RoIHF1ZXJpZXMgc2hv dWxkCiAgICAgIGJlIGFjdGl2ZS4gVGhlbiBzaHJpbmsgdGhlIHdpbmRvdyB0byBsZXNzIHRoYW4g ODAwcHgsIGFuZCB0aGUgbWVkaWEgcXVlcnkKICAgICAgd2lsbCBpbmNvcnJlY3RseSBzdGlsbCBi ZSBhY3RpdmUuIEl0IHdpbGwgZGVhY3RpdmF0ZSB3aGVuIHRoZSBjb250YWluZXIKICAgICAgcXVl cnkgZGVhY3RpdmF0ZXMgYXQgNjAwcHggd2lkZS4gQWx0ZXJuYXRpdmVseSwgc3RhcnQgd2l0aCBh IHdpbmRvdwogICAgICBuYXJyb3dlciB0aGFuIDgwMHB4LiBObyBjaGFuZ2VzIHRvIHRoZSB3aW5k b3cgc2l6ZSB3aWxsIGV2ZXIgYWN0aXZhdGUgdGhlCiAgICAgIG1lZGlhIHF1ZXJ5LCBldmVuIHRo b3VnaCB0aGV5IHNob3VsZC4KICAgIDwvcD4KICA8L2Rpdj4KICAKICA8IS0tIEFjdHVhbCBjb250 ZW50IHRoYXQgcmVwcm9kdWNlIHRoZSBidWcuIC0tPgogIDxkaXYgaWQ9InRlc3QtY29udGFpbmVy Ij4KICAgIDxkaXYgaWQ9ImNvbnRhaW5lci1xdWVyeS1pbmZvIj48L2Rpdj4KICA8L2Rpdj4KCiAg PGRpdiBpZD0ibWVkaWEtY29udGFpbmVyIj4KICAgIDxkaXYgaWQ9Im1lZGlhLXF1ZXJ5LWluZm8i PjwvZGl2PgogIDwvZGl2Pgo8L2JvZHk+CjwvaHRtbD4K