Viewport The viewport is the part of a page visible to the user, and is something every web page designed to work on mobile devices has to consider. The issues raised were mostly about how the vh unit interacts with the URL bar on mobile browsers, explained in the “ The trick to viewport units on mobile ” article on CSS-Tricks. Another factor here might be about not having a specification for the viewport . These issues are tightly linked to scrolling . Part of the frustration can be attributed to the behavior of vh units originally being different across different mobile browsers. It could also be about a discrepancy of understanding about the vh unit between developers and the CSS WG, see [css-values-4] Add vhc value . While Chrome 56 changed its behavior to match Safari on iOS , some developers may not have noticed this, and it remains difficult to achieve the desired effect. There is an open CSS Working Group issue to address this. In the meantime some developers have turned to -webkit-fill-available or JavaScript workarounds. The effect of scrollbars on the vw unit also came up, and was the subject of another CSS Working Group issue , resolved as “Drop the requirement to subtract scrollbar size from vh/vw units for overflow scroll.” While not a browser compatibility issue, a platform compatibility issue of sorts remains, as some platforms have classic scrollbars and some have overlay scrollbars. Some are also implementing their own scrollbars and hiding the native one. In response to these findings, Chrome’s input team did some investigation of viewport units , confirming that Chrome and Safari now have the same behavior. Web developer quotes In our interviews, one participant told us about viewport sizing issues and the workaround they use: Then there’s the odd viewport sizing in iOS that was a little bit of an annoyance. I kind of read the whole, long bug tracker thread in the WebKit forum about why they decided to size the viewport units the way they did. And it makes sense, I understand the logic, but we did have to figure out a few workarounds for a couple of our screens.
Made with FlippingBook - professional solution for displaying marketing and sales documents online