[Webkit-unassigned] [Bug 238329] New: [CSS Container Queries] Inconsistent query application in grid
bugzilla-daemon at webkit.org
bugzilla-daemon at webkit.org
Thu Mar 24 09:01:04 PDT 2022
https://bugs.webkit.org/show_bug.cgi?id=238329
Bug ID: 238329
Summary: [CSS Container Queries] Inconsistent query application
in grid
Product: WebKit
Version: Safari Technology Preview
Hardware: Mac (Apple Silicon)
OS: Unspecified
Status: NEW
Severity: Major
Priority: P2
Component: CSS
Assignee: webkit-unassigned at lists.webkit.org
Reporter: scott at scottkellum.com
Created attachment 455646
--> https://bugs.webkit.org/attachment.cgi?id=455646&action=review
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
--
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20220324/590b9f84/attachment-0001.htm>
More information about the webkit-unassigned
mailing list