implementedif the vh-unit is
This article was written in 2014. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.
I love the
vh unit. You can use it to make something as high as the viewport, or you can use it to make sure that something is never as high as the viewport. There’s lots of other stuff you can do with it as well. I love it, and I want to use it for every project I work on. Unfortunately there’s an insane bug in Safari on iOS that makes it impossible to use it. I tried to fix it with a little script, but I think I can use a little help to improve it.
Crazy, buggy implementation
In Safari on iOS 7
100vh is as high as the viewport as long as the document is not higher than the viewport. If the document is higher than the viewport,
100vh is as high as the document. Which is insane. .
I wrote this simple script that detects if the browser of the visitor has this bug. If so, it adds the class
crazy-vh to the HTML element. Here’s a live example. If you place this script right before the closing
body tag of your document you can provide an alternative style for those poor people with Safari on iOS. If you have control over the back-end you can improve the performance of this script by setting a cookie and adding the className on the server.
The previous version of this script was unreliable. Matthijs Brouwer suggested me to use
document.readyState instead of a simple
setTimeout. Which works perfectly. The problem is, of course that this can result in the layout changing after the script runs. I don’t know how to solve this, how to run this script reliably before the styles are loaded. If you do, and you know how to solve it, please let me know.
An alternative solution
Stephen Hay pointed me in the direction of this pixel perfect buggyfill of this bug by Rodney Rehm, which converts all vh occurrences in your stylesheets to pixel values.