Content "jumps" Vertically On Chrome IOS With Viewport Sizing When Address Bar Is Hidden/displayed

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 slig

Solution 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