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?
See Question&Answers more detail:
os 
