Mobile Chrome vh units fix

What is this?

Mobile (Android and iOS) Chrome has something I consider a bug. On scroll, when address bar dissapears, inner window height is changed, and with it vh units size is changed as well, making whole page to jump after recalculating the layout. This also happens when keyboard pops up.

This small library aims to solve that problem.

Jump to usage.


Grab it from GitHub.


var vhFix = new VHChromeFix(options)

Options is an array of objects, every containing two attributes - CSS class and height in vh units.

var options = [
    selector: '.Bears', // Mandatory, CSS selector
    vh: 150,  // Mandatory, height in vh units
    selector: '.Foxes',
    vh: 50
    selector: '.Horses',
    vh: 100

var vhFix = new VHChromeFix(options);


This page contains three divs that are using vh units. Header at the top, and two divs below. Scroll and check them out.


This block has a height of 50vh

This block has a height of 150vh

Photos used are from National Geographic's 2016 Travel Photographer of the Year Contest .