content “jumps” vertically on Chrome iOS with view

Question

Im' having different sections on my website and I want some of them to take the full viewport height. So I size with height: 100vh;

On Chrome iOS, this results in the content slightly "jumping vertically" whenever the address bar is hidden or displayed again. In particular, this happens whenever user scrolls in one direction then in another direction.

You can see an example here (to look on Chrome mobile browser): www.PlasticPalacePeople.com

Any idea how to solve that? (and, ideally, to keep my sections taking the full viewport height)

P.S.: there seems to be no problem with Safari for iOS and embedded Facebook web browser

Thank you

Answer 1

Hey I ran across this same problem. While this doesn't solve the annoyingness of the CSS Viewport Height resizing issue in mobile chrome it does seem to be a viable workaround.

Just change "jumbotron" below to whatever your css selector is for the element/elements you want full height.

HTML

<div class="jumbotron"></div>

CSS

.jumbotron {
  height: 100vh;
}

JS

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

What it does is it sets an height of the section when the page loads to the viewport height. Seems to work although I wish this could be done without javascript.

Update: Here's my complete answer

https://stackoverflow.com/a/40156488/1728524