Bryan Willis Bryan Willis - 1 month ago 33
CSS Question

Calculating Viewport Height on Chrome Android with CSS

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() );
}
calcVH();
$(window).on('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

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('resize 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('resize', calcVH, true);
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.

Comments