| 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 | ||
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;
}
}
```
|
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