Flex-box 100vh stretches behind mobile safari chrome - are there any known tricks or solutions

Question

Flex-box 100vh stretches behind mobile safari chrome - are there any known tricks or solutions? - OR is it just too good to be true?

I often want to have a 'modal' type cover div, or a full-screen image for simple one button UI screens. The more I use flex-box, the less I can count on some of my old techniques. The hack I normally reach for when it comes to 100% height, is to:

html, body {
  height: 100%;
}

HTML and body don't have an explicit height... and can't really know what height they are. In order to tell any children how 'tall' to be, they need to know their parent's height. This can get pretty messy with deeply nested elements.

100vh view-port height takes this nesting issue out of the equation, but on mobile browsers there seems to be a difference in opinion as to how this should play out. In iOS Safari the vh would include its area beneath its meddlesome UI bar they place at the bottom. Centered elements do not appear centered because of the perceived offset and when you attempt to scroll things get all screwed up and clunky and feel broken.

I can use modernizr to check for touch, but this is a undesirable position to be in. In some cases I can add a class for html and body 100% including the view nested views, but when something like flickity injects many child elements, or there are nested views in an MVC that generate more nested elements, it's really unruly to tell everything to be 100% height / and touch isn't a consistent measure because there are touch desktops etc.

.element-with-background-image {
  width: 100%;
  height: 100vh;
  background-image: url(...);
  background-size: cover;
  background-position: center center;
}

This feels like something we deserve. They took away our max on the viewport meta-tag. I just want to make something that doesn't feel broken.

Dead simple example: http://s.codepen.io/sheriffderek/pen/LWevrx Debug version (to test on phone): http://s.codepen.io/sheriffderek/debug/LWevrx

More complex example with slider: http://codepen.io/sheriffderek/pen/BWJEKJ Debug version (to test on phone): http://s.codepen.io/sheriffderek/debug/BWJEKJ

Making things position: fixed; seems to be the only way to get full coverage without glitch (which usually caused major glitches until recently)

Fixed position version: http://codepen.io/sheriffderek/pen/XMVQOX Debug version (to test on phone): http://s.codepen.io/sheriffderek/debug/XMVQOX

Fixed position w slider / needed to get window height and add it to all childred - best solution I've been able to come up with: http://codepen.io/sheriffderek/pen/RpxOzM Debug version (to test on phone): http://s.codepen.io/sheriffderek/debug/RpxOzM

summary

Is 100vh just not something that we can use in situations like this? Should I take it out of my toolbox? OR - do you have a set of rules or techniques that will allow me to keep it in my life?

Answer 1

According to this Post Chrome has the same behaviour since Version 56. https://developers.google.com/web/updates/2016/12/url-bar-resizing

Improved interoperability with Safari on iOS. The new model should match how Safari behaves, making life easier for web developers. The unintuitive choice of making vh units the largest possible viewport but the ICB the smallest possible is to match Safari's behavior.

So 100vh will not help you (me) in this Situation.