Hacker News Reader

Comment by Daiz | Hacker News Reader

Gotta say, really disappointed with the fact that instead of Safari making 100vh actually mean 100% of viewport height like it's supposed to, they instead present us with all these new viewport units, all to fix a problem that was caused by their own deviation from the spec to begin with. And of course they're not going to do anything about 100vh even with all these new units, because how else are we going to force developers to use our special units to cater to our browser's quirks!

View on HN

What spec? I just looked up what the issue is with vh on mobile and the very first resource I found talked about how the spec isn't clear on how it's supposed to behave in the presence of movable chrome, like the address bar on mobile browsers.

It also says that Safari's initial implementation updated `vh` when the address bar changed visibility and this caused a bad jump in layout, which is why they changed it to ignore the address bar so it's a fixed value instead. And it says Chrome mobile followed suite as well, which means it's not just Safari that thinks the "fixed value" approach is better on mobile.

I've yet to meet a single developer who likes what Apple did with 100vh. And it's why all my projects to date that want to use viewport height in CSS have ended up adding a JS snippet that sets a --vh CSS variable to window.innerHeight on resize, because I have no interest in dealing with Apple's special boy CSS behavior. And really, even Apple itself admits that their 100vh solution is troublesome - they wouldn't have introduced all these new units otherwise! Even if the saner solution would have been to just change their idiosyncratic 100vh behavior to what developers actually expect from it.

And what do "developers" expect from it? Because as a user I certainly remember that it used to be very common for website layout to jump around in an aggravating fashion when hiding the address bar.

These new units do not indicate that Apple's 100vh behavior is "troublesome", they indicate that mobile needs better viewport units than desktop does. Which is why there are three separate new viewport units, to correspond to the three different desired measurements. Even if Apple never changed 100vh behavior, these new set of units are a significant improvement.

100vh is a good default for unaware websites, because otherwise you get unexpected layout jump. The other units are good tools for aware developers who intentionally want to match largest, smallest, or dynamic height. Seems like best of both worlds.

Reply on news.ycombinator.com