Re: [csswg-drafts] [css-values-4] viewport units vs initial containing block (#6453)

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

```html
<!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.

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6453#issuecomment-1783581699 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 27 October 2023 22:36:58 UTC