Quick test to show off the viewport -> unit correspondence: https://xanthir.com/etc/tests/viewports/

<!DOCTYPE html>
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<style>
html { height: 100%; width: 15%; margin: 0; padding: 0; background: white; }
body { margin: 0; padding: 0; }
div { top: 0; }
#abs { position: absolute; height: 100%; width: 15%; left: 15%; background: #0f03;}
#fixed { position: fixed; height: 100%; width: 15%; left: 30%; background: #00f3;}
#svh { position: absolute; height: 100svh; width: 15%; left: 45%; background: #ff03; }
#dvh { position: absolute; height: 100dvh; width: 15%; left: 60%; background: #f0f3; }
#lvh { position: absolute; height: 100lvh; width: 15%; left: 75%; background: #0ff3; }
* { box-sizing: border-box; }
html, div[id] { border: thick dotted; }
div { writing-mode: vertical-rl; writing-mode: sideways-rl; }
</style>
<div id=abs>abspos, height 100%</div>
<div id=fixed>fixpos, height 100%</div>
<div id=svh>abspos, height 100svh</div>
<div id=dvh>abspos, height 100dvh</div>
<div id=lvh>abspos, height 100lvh</div>
<div>&lt;html>, height 100% (ICB)</div>
<br><br>
foo<br>
foo<br>
...more foos truncated...

Blink, WebKit, and Gecko have consistent behavior:

ICB is the small viewport size
abspos containing block is the small viewport size
fixpos containing block is the layout viewport (aka dynamic viewport size)
small/dynamic/viewport all work as expected - large overflows the viewport at first, but is the size of the viewport after the URL bar hides. Dynamic matches svh until the URL bar hides, at which point it snaps to matching lvh.

Note: Firefox on iOS is a little broken; it treats all the viewport units as svh, never changing them as the URL bar hides. It does still resize the fixpos containing block, tho.

Proposal: Spec the current interoperable behavior: that the ICB matches the small viewport, but the fixedpos containing block matches the dynamic viewport.

[css-values-4] viewport units vs initial containing block #6453

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions