Bug 240713 - Accept Viewport Units in Media Queries
Summary: Accept Viewport Units in Media Queries
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-05-20 06:35 PDT by Bramus
Modified: 2022-05-20 07:40 PDT (History)
5 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Bramus 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
Comment 1 Radar WebKit Bug Importer 2022-05-20 07:21:16 PDT 
<rdar://problem/93653021>
Comment 2 Bramus 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;
	}
}
```