On iOS, as I'm sure you know, as you're scrolling the address bar will collapse. The viewport size is calculated based on the collapsed size of the header. If you want, say a full page screen, that fills the screen but no more, then you can't use viewport units. There is some webkit-specific stuff baked into Safari that we ended up using that will avoid that problem. But that was one of our initial stumbling blocks when we were trying to have a full-screen, non-scrollable view in mobile Safari.
We use -webkit-fill-available to handle that. That was the primary fix we found for the 100vh size issue in mobile Safari.
Two other interview participants also reported having issues with viewport units, either accepting that things didn't look right or using JavaScript workarounds:
It was either something about vw or vh for the viewport width and height. Or percentages for widths and heights. It was some irregularity with that, and although it was perfect on Chrome and Firefox, it just did not look correct on Safari. We still support it, because it still works with the dashboard that we've been building, but some of the things don't just quite look right. Also things like vh, the viewport height [...] I don't entirely remember all the details, I just remember that it was different across browsers. I think whether the scrollbar is considered part of vh height is a little bit undefined, and it's definitely different in Safari and Chrome. [...] The scrollbar thing in many cases might not be a big problem, if you do 100vw then it's going to be a problem because you're going to have differences on the browser edge, but if it's 50% of the browser width then you're probably not going to care so much if scrollbars are included or not. Then just individual workarounds. If you really needed to be, maybe do it with a bit of JavaScript, with resize event listener and check the browser properties window.clientWidth, whatever works, test which combination of these is going to work to fix a given problem.
Finally, a few quotes from the survey responses:
I ls the URL bar part of 100vh?
Made with FlippingBook - professional solution for displaying marketing and sales documents online