4 ms·
On the face of it, the only thing I'd worry about is if scrollbars appear/disappear, and if that would cause the elements using this new unit to get resized up/
by Someone1234 4y ago
On the face of it, the only thing I'd worry about is if scrollbars appear/disappear, and if that would cause the elements using this new unit to get resized up/down.
Or to phase another way: If the scrollbar isn't currently rendered, is a hypothetical scrollbar still excluded or not? Since both ways you answer this question may make people unhappy.
- azangru 4y agoThe most common problem that I see is that people (almost always writing their CSS on a Mac, because Macs, by default, would hide the consequences of this) assign a width of 100vw to their header, footer, or main section, as a result of which, the moment that the page content's height exceeds the viewport height, the page will show not just a vertical scrollbar, but a horizontal scrollbar as well, because now 100vw is greater than 100% of body width. The above is easily fixed; however, I have also seen designs like this one [0], where a team has painted itself into a corner by assigning max-width to the body element; yet also wanting to have hero elements inside of the body element that would break out of the confines of the body and span the whole width of the viewport. They tried to use 100vw for the hero, which resulted in the infamous horizontal scrollbar. (I have since learnt — from Josh Comeau, I think — that their design problem could have been cleanly solved by designing the layout with CSS grid) [0] - https://i.imgur.com/LNyJIAq.png https://i.imgur.com/LNyJIAq.png