NEW240713
Accept Viewport Units in Media Queries 
https://bugs.webkit.org/show_bug.cgi?id=240713
Summary Accept Viewport Units in Media Queries
Bramus
Reported 2022-05-20 06:35:49 PDT
This surprisingly didn't work: ```css @media (height: 100vh) { body { background: lightyellow; } } ``` I expected the body to have a lightyellow background color. Instead, it remains the default white. Behavior in other browsers: - Firefox on Desktop: lightyellow - Chrome on Desktop: lightyellow - Safari on Desktop: default white Demo: https://cdpn.io/pen/debug/abqwBBa Note that the demo page also includes MQs that target svh/lvh units. A browser that supports these new viewport units should respond to those Older related (but now closed) bug that targeted the same: https://bugs.webkit.org/show_bug.cgi?id=144260
Attachments
Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2022-05-20 07:21:16 PDT
<rdar://problem/93653021>
Bramus
Comment 2 2022-05-20 07:40:37 PDT
Further testing (on an iPhone 13 Pro) reveals that values up to 85vh work: ```css @media (min-height: 85vh) { /* Works */ body { background: lightgreen; } } @media (min-height: 86vh) { /* Does not work */ body { background: lightgray; } } ```
Note You need to log in before you can comment on or make changes to this bug.