The CSS dynamic viewport units svh
, dvh
& lvh
are calculated based on collapsing browser chrome metrics (details here). Orion does not correctly calculate these values, instead calculating all three with the same value.
The three units should use the same values as Safari in all four situations:
- Before scrolling with the toolbars fully expanded
- While scrolling as the toolbars gradually collapse
- After scrolling with the toolbars now collapsed
- After manually collapsing the toolbars via the menu
The following test document demonstrates the issues:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
<style>html,body{margin:0;padding:0}</style>
</head>
<body>
<div style="display:flex;">
<div style="height:100svh;flex:1;background:#dff;">100svh</div>
<div style="height:100dvh;flex:1;background:#fdf;">100dvh</div>
<div style="height:100lvh;flex:1;background:#ffd;">100lvh</div>
</div>
<div style="height:1000px;"></div>
</body>
</html>
And here are screen recordings comparing both browsers (of a slightly modified document to make it very clear where the differences are):
Orion:
Safari:
(This is related to https://orionfeedback.org/d/6111-hide-toolbar-on-scroll-recalculates-viewport-height but that is specific to how Orion causes a page re-render when crossing the magic scroll position Orion internally considers "toolbars collapsed"; this is about adherence to the CSS spec.)
1.3.7 (15) (WebKit 8617.2.4.10.8)
17