Today I learned that the viewport units in CSS don’t account for the width of visible classic scrollbars like on Windows.
This means that if you use width: 100vw to make an element the full width of the page and then a scrollbar appears, it will cause the element to overflow (by 17px which is apparently the width of Windows scrollbars) and create a horizontal scrollbar.
CSS media queries don’t take them into account either, so if the viewport width is close (say within 17px) of a breakpoint then the appearance of a scrollbar will cause it to cross that threshold.
This article gives some potential solutions:
- Use the new CSS container queries
- Use javascript to calculate the actual width
Another solution is to use javascript to replace the classic scollbars with overlay scrollbars like you see on mobile operating systems. OverlayScrollbars is a popular js library that does this.