4

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

Baptiste Vanpoulle
  • 61
  • 5
  • It seems that your background images are actually resizing giving you that jarring experience. It may serve you well to specify a 'width:100vw;' on your '.section'. – Carol McKay Jul 09 '16 at 09:09
  • yes you are right that exactly what happens I believe: background images are resizing due to viewport height changing due to Chrome iOS address bar disappearing/re-appearing. Strangely (but thankfully) this doesn't happen on Safari. I don't think specifying width would change because the height would still be set at 100vh and thus resizing – Baptiste Vanpoulle Jul 09 '16 at 09:19
  • but it's worth a try on the background image container divs right? – Carol McKay Jul 09 '16 at 09:24
  • This isn't only ios this happens on android chrome as well. Very annoying. Adding the 100vw doesn't change anything – Bryan Willis Sep 08 '16 at 06:24
  • Anyone find a CSS only solution? Adding Javascript here seems like overkill. – Kyle Dumovic Nov 02 '16 at 04:23

1 Answers1

0

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

Community
  • 1
  • 1
Bryan Willis
  • 3,552
  • 1
  • 25
  • 34