Bug 238329

Summary: [CSS Container Queries] Inconsistent query application in grid
Product: WebKit Reporter: Scott Kellum <scott>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Major CC: koivisto, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Mac (Apple Silicon)   
OS: macOS 12   
URL: https://cdpn.io/pen/debug/bGagRKK/abb869e42204412d0090a4267580b2ce
See Also: https://bugs.webkit.org/show_bug.cgi?id=244573
Attachments:
Description Flags
A > 600px container query being applied to an element with the width of 302px none

Scott Kellum
Reported 2022-03-24 09:01:04 PDT
Created attachment 455646 [details] A > 600px container query being applied to an element with the width of 302px Queries are applied irregularly to elements on the page that are rendered with CSS Grid. In the demo below, when one element on the grid row matches the CQ criteria, the styles apply to all elements on that grid row. This means that even though column three can be 400px, it will still be styled with the above 600px media query. Replicated here: Problem exists on both an Intel 12" MacBook and M1 Mac Mini. https://cdpn.io/pen/debug/bGagRKK/abb869e42204412d0090a4267580b2ce ALSO pages inside iframes don’t update live. A full-page refresh is required for the queries to take effect making it difficult to test in CodePen. https://codepen.io/scottkellum/pen/bGagRKK/abb869e42204412d0090a4267580b2ce?editors=0100
Attachments
A > 600px container query being applied to an element with the width of 302px (44.27 KB, image/png)
2022-03-24 09:01 PDT, Scott Kellum 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2022-03-24 16:10:32 PDT
<rdar://problem/90800006>
Note You need to log in before you can comment on or make changes to this bug.