CSS fix for 100vh in cellular WebKit
Not long ago there was some hype around how WebKit handles 100vh in CSS, essentially ignoring underneath edge of the browser viewport. A few have suggested avoid using 100vh, other people have come up with different alternatives to operate around the problem. In fact , this issue will go further back a few years when Nicolas Hoizey filed a bug along with WebKit on the subject (the short of this: WebKit says this is “intentional” 🧐).
The other day I was doing some work with a fundamental flexbox layout – header, primary, sticky footer – the kind we have all seen and used often times before:
< header> HEADER WILL GO HERE< /header>
< main> PRIMARY GOES HERE< /main>
< footer> FOOTER GOES HERE< /footer>
I started running some browser tests upon my iPhone, and that’s once i noticed that my sticky footer was not looking so sticky:
The footer was hiding below Safari’s menus bar. This is the 100vh bug (feature? ) that Nicolas originally discovered and reported. I did a little sleuthing – hoping that maybe presently a non-hacky fix had been discovered – and that’s when I found my own solution (btw, it’s completely hacky):
The idea at the rear of -webkit-fill-available – at least at 1 point – was to allow for a component to intrinsically fit into a particular design, i. e., fill the accessible space for that property. At the moment inbuilt values like this aren’t fully backed by the CSSWG.
However , the above is actually specifically in WebKit, which really does support -webkit-fill-available. So with that in your mind, I added it to my ruleset with 100vh as the fallback for any other browsers.
/* mobile viewport bug fix */
And today the sticky footer is right exactly where I want it to be in mobile Firefox!
Does this really work?
The court seems to be out on this. I’ve got no problems with any of the tests I have run and I’m using this method within production right now. But I did get a number of responses to my tweet directing to other possible problems with using this (the effects of rotating devices, Chrome not really completely ignoring the property, etc . ).
Will -webkit-fill-available work in every situation? Probably not, cuz let’s be sincere: this is the web, and it can be really hard to build. But , if you’re aquiring a problem with 100vh in WebKit plus you’re looking for a CSS alternative, you might like to try this.