Viewport relative vh unit needs to update values based upon dynamic tab/address chrome

• Component: CSS
• Status: NEW ---

[Ben Frain]

The vh unit specifies one proportion of the viewport height. Therefore 100vh should be the entire viewport height. A problem occurs in Safari due to the dynamic tab/address bar that resizes on scroll (and consequently means the viewport height changes). In previous implementations of iOS the minimal-ui meta tag allowed a consistent viewport but the current version (8.2 at time of filing) has deprecated this tag.

This problem manifests when scrolling panels are created by creating container divs with a viewport height of 100vh. The scrolling panels don't get the vh value updated when the address bar chrome resizes leading to a double-scroll scenario.

You can see this issue here: http://benfrain.com/playground/scroll-test.html

In the absence of an implementation that facilitates this, is there any chance of getting some form of meta tag that prevents the address bar chrome resizing?

[Sam Sneddon [:gsnedders]]

I think practically this has been entirely solved with the new viewport units in Level 4 (dvh, svh, lvh, etc.)?