Title rewritten as: CSS3's 100vh value is not fixed in mobile browsers

Question

I have a very strange problem... I get this behavior in every browser and mobile version I come across:

• When a page loads, all browsers have a top menu (e.g. showing the address bar) that slides up when you start scrolling.
• Sometimes, 100vh is only calculated on the visible part of the viewport, so when the browser bar slides up, 100vh increases (in pixels)
• All layouts will be redrawn and resized because the dimensions have changed
• Not good for user experience

How to avoid this problem? When I first heard about viewport height I was excited, I thought I could use it instead of using JavaScript to set a fixed height for blocks, but now I think the only way is actually to use JavaScript and some resizing Events...

You can see the problem here: Sample Site

Can anyone help me solve this/provide a CSS solution?

---

Simple test code:

/* Maybe I can track when the problem occurs... */
$(function(){
  var resized = -1;
  $(window).resize(function(){
    $('#currenth').val( $('.vhbox').eq(1).height() );
    if (resized) $('#currenth').css('background:#00c');
  })
  .resize();
})

*{ margin:0; padding:0; }

/*
  This is a box that should remain the same height...
  Use min-height to allow content to exceed the height of the viewport if there is too much text
*/
.vhbox{
  min-height:100vh;
  position:relative;
}

.vhbox .t{
  display:table;
  position:relative;
  width:100%;
  height:100vh;
}

.vhbox .c{
  height:100%;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

<div class="vhbox" style="background-color:#c00">
  <div class="t"><div class="c">
  The height of this div should be 100% of the viewport and maintain this height when scrolling the page
    <br>
    <!-- If the resize event is triggered, this input box will be highlighted -->
    <input type="text" id="currenth">
  </div></div>
</div>

<div class="vhbox" style="background-color:#0c0">
  <div class="t"><div class="c">
  The height of this div should be 100% of the viewport and maintain this height when scrolling the page
  </div></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 1

You can try using min-height: -webkit-fill-available; instead of 100vh in your css. This should do the trick

Answer 2

Unfortunately, this is intentional...

This is a well-known problem (at least in Safari mobile) and is intentional as it prevents other problems. Benjamin Poulain responded to a webkit bug:

Nicolas Hoizey has done quite a bit of research on this: https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the -document-in-some-mobile-browsers.html

No fixes planned

Currently, there's not much you can do except avoid using viewport height on mobile devices. Chrome also made changes in 2016:

• https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/BK0oHURgmJ4
• https://developers.google.com/web/updates/2016/12/url-bar-resizing