Calculating Viewport Height on Chrome Android with CSS

Question

So I noticed that mobile Chrome calculates the address bar into the viewport height. Because of this using height: 100vh on an element doesn't work because when the address bar scrolls the viewport height changes.

I was actually able to find a question that had the same issue here on ios, but after investigating further I realized that this happens on all mobile Chrome browsers. When the address bar scrolls out of the viewport and then again when scrolls into the viewport, the viewport height changes.

This causes any element using vh to recalculate which makes the page jump. It's extremely annoying when using a background image because it causes the image to resize on scrolling.

Here's the code and an example

   .jumbotron {
        background-image: url(http://example.com/image.png);
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        height: 100vh;
    }

You'll only be able to see the issue when scrolling up and down using mobile chrome.

My question is, I would like to know is there any way around this or if not how to calculate full height on mobile chrome without causing the page to jump (css or js).

http://s.codepen.io/bootstrapped/debug/qadPkz

---

Update: So as far as using jquery here's what I came up with which seems to work pretty well:

function calcVH() {
    $('.jumbotron').innerHeight( $(this).innerHeight() );
}
$(window).on('load resize orientationchange', function() {
  calcVH();
});

Demo of working example above

I'd love to be able to do this without javascript though if someone has a CSS alternative that they know works.

Answer 1

Here's what I went with:

HTML

<div id="selector"></div>

CSS

#selector {
   height: 100vh;
}

JQUERY

function calcVH() {
    $('#selector').innerHeight( $(this).innerHeight() );
}
(function($) { 
  calcVH();
  $(window).on('orientationchange', function() {
    calcVH();
  });
})(jQuery);

PURE JS (NO JQUERY)

function calcVH() {
  var vH = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  document.getElementById("selector").setAttribute("style", "height:" + vH + "px;");
}
calcVH();
window.addEventListener('onorientationchange', calcVH, true);

Simply change #selector to whatever your css selector is. If you use the pure js version you need to use an ID unless you change .getElementByID to .getElementsByClassName.

I'm only aware of this being a problem in Mobile Chrome Android, but I'm guessing it's the same for Chrome iOS as well. You could easily add a mobile detect option if you wanted so this only runs when you need it to. Personally I use Detectizr which works well, but to be honest, since it's pretty lightweight as it is, adding something like this is probably not worth it unless you're already using it.

Hopefully this gets fixed soon so a javascript solution isn't necessary. Also, I tried adding the resize event in case the browser width resizes, but after seeing this question I removed it from my answer. If you want to try using those just change the above to:

JQUERY

function calcVH() {
    $('#selector').innerHeight( $(this).innerHeight() );
}
(function($) { 
  calcVH();
  $(window).on('orientationchange resize', function() {
    calcVH();
  });
})(jQuery);

$(window).on('resize orientationchange', function() {

PURE JS (NO JQUERY)

function calcVH() {
  var vH = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  document.getElementById("selector").setAttribute("style", "height:" + vH + "px;");
}
calcVH();
window.addEventListener('onorientationchange', calcVH, true);
window.addEventListener('resize', calcVH, true);