4 ms·

Note that the vw unit is broken by design because it includes the viewport scrollbar, so that 100vw may be more than 100% of the effective viewport width—100vw

Note that the vw unit is broken by design because it includes the viewport scrollbar, so that 100vw may be more than 100% of the effective viewport width—100vw is always wrong. There are some situations where the imprecision is acceptable, but there are almost always better solutions these days.

madeofpalk 4y ago
I'm not sure exactly about how scrollbar width plays into it, but the Large/Small/Dynamic Viewport Units help out with this https://css-tricks.com/the-large-small-and-dynamic-viewports/ https://css-tricks.com/the-large-small-and-dynamic-viewports... Doesn't look like they're supported by Chrome yet, but they're there in Firefox and Safari.
- chrismorgan 4y ago
  Those new viewport units only fix the issues with retractable chrome as commonly employed on mobile platforms. They completely ignored the scrollbars issue which has been a design bug from the very start (though there used to be a workaround—`overflow: scroll` on the body—but it was removed from the spec after only Firefox ever implemented it), which I cynically say is because it’s not an issue on mobile platforms which uniformly use overlay scrollbars.
jacobr 4y ago
I wouldn't say it's wrong in the examples above - I want to have the same padding on both sides, and not the padding + scrollbar gutters on one side. There's also `scrollbar-gutter: stable` to always reserve space for the scrollbar. It's not supported in Safari, but macOS uses overlay scrollbars by default anyway so it doesn't really matter.
- chrismorgan 4y ago
  It’s wrong, because 100vw is the document width plus any scrollbar width (including via scrollbar-gutter). If you have a body with zero padding and a vertical scrollbar, then 100vw > 100% except on platforms with overlay scrollbars. On Windows, this is likely to mean that or a 1000px-wide body, 100vw will be 1017px.

madeofpalk 4y ago

I'm not sure exactly about how scrollbar width plays into it, but the Large/Small/Dynamic Viewport Units help out with this https://css-tricks.com/the-large-small-and-dynamic-viewports/ https://css-tricks.com/the-large-small-and-dynamic-viewports... Doesn't look like they're supported by Chrome yet, but they're there in Firefox and Safari.

chrismorgan 4y ago
Those new viewport units only fix the issues with retractable chrome as commonly employed on mobile platforms. They completely ignored the scrollbars issue which has been a design bug from the very start (though there used to be a workaround—`overflow: scroll` on the body—but it was removed from the spec after only Firefox ever implemented it), which I cynically say is because it’s not an issue on mobile platforms which uniformly use overlay scrollbars.

jacobr 4y ago

I wouldn't say it's wrong in the examples above - I want to have the same padding on both sides, and not the padding + scrollbar gutters on one side. There's also `scrollbar-gutter: stable` to always reserve space for the scrollbar. It's not supported in Safari, but macOS uses overlay scrollbars by default anyway so it doesn't really matter.

chrismorgan 4y ago
It’s wrong, because 100vw is the document width plus any scrollbar width (including via scrollbar-gutter). If you have a body with zero padding and a vertical scrollbar, then 100vw > 100% except on platforms with overlay scrollbars. On Windows, this is likely to mean that or a 1000px-wide body, 100vw will be 1017px.