Method for accounting for scrollbar when using 100vw
Closed this issue · 0 comments
Newnab commented
vw units return viewport width, but assumes that scrollbars do not exist: https://drafts.csswg.org/css-values-3/#viewport-relative-lengths. What this means is that any element which has been forced to breakout into full width (set to 100vw, margin-left/right -50vw) is actually slightly off-screen.
This isn't noticable usually due to the main default of overflow:hidden, but on Chrome Windows this means that these breakout full width elements are actually 8.5px off the left/right side of the screen.
An approach that solves this, using a JS-updated CSS variable is available in one of our private repositories.