Bug 240713
| Summary: | Accept Viewport Units in Media Queries | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Bramus <bramus> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | hi, koivisto, ntim, simon.fraser, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari Technology Preview | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
Bramus
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
<rdar://problem/93653021>
Bramus
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;
}
}
```