html - CSS3 100vh not constant in mobile browser -

i have odd issue... in every browser , mobile version encountered behavior:

• all browser have top menu when load page (showing address bar example) slide when start scroll page.
• 100vh calculated on visible part of viewport, when browser bar slide 100vh increases (in terms of pixels)
• all layout re-paint , re-adjust since dimensions have changed
• bad jumpy effect user experience

how can avoid problem? when first heard of viewport-height excited , thought use fixed height blocks istead of using javascript, think way in fact javascript resize event...

you can see problem at: sample site

can me / suggest css solution?

---

simple test code:

/* maybe can track issue whe occours... */  $(function(){    var resized = -1;    $(window).resize(function(){      $('#currenth').val( $('.vhbox').eq(1).height() );      if (++resized) $('#currenth').css('background:#00c');    })    .resize();  })

*{ margin:0; padding:0; }    /*    box sould keep constant height...    min-height allow content taller viewport if 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">    div height should 100% of viewport , keep height when scrolling page      <br>      <!-- input highlight if resize event fired -->      <input type="text" id="currenth">    </div></div>  </div>    <div class="vhbox" style="background-color:#0c0">    <div class="t"><div class="c">    div height should 100% of viewport , keep height when scrolling page    </div></div>  </div>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

unfortunately intentional…

this know issue (at least in safari mobile), intentional, prevents other problems. benjamin poulain replied webkit bug:

this intentional. took quite bit of work on our part achieve effect. :)

the base problem this: visible area changes dynamically scroll. if update css viewport height accordingly, need update layout during scroll. not looks shit, doing @ 60 fps practically impossible in pages (60 fps baseline framerate on ios).

it hard show “looks shit” part, imagine scroll, contents moves , want on screen continuously shifting.

dynamically updating height not working, had few choices: drop viewport units on ios, match document size before ios 8, use small view size, use large view size.

from data had, using larger view size best compromise. website using viewport units looking great of time.

nicolas hoizey has researched quite bit: https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

no fix planned

at point, there not can except refrain using viewport height on mobile devices. mobile chrome seems want adapt too, although not sure if follow through.