Unexpected padding
I have this codepen with a strange behavior on chrome but not on firefox.
https://codepen.io/Andy1020/pen/jOKBjzE
In firefox (second picture) things looks pretty good but I am not sure what's going on with chrome (first picture). It seems like it adds some padding for the vertical scroll bar (even if scrollbar-gutter is set to stable) that cause the horizontal scroll bar to appear.
Is the vertical scroll bar the reason for the padding? Why is not shown in devtools layout? How can I fix this and prevent the horizontal scroll bar to appear?
4 Replies
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
Hmm, it works indeed. But I am still confused, this means firefox treats 100vw in a different way than chrome?
Well, I think I got some sort of answer from caniuse: "Currently all browsers but Firefox incorrectly consider 100vw to be the entire page width, including vertical scroll bar, which can cause a horizontal scroll bar when overflow: auto is set."
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
Stay away from viewPort units until you learn the issues around then. VW does not account for scroll bars, also will cause you headache on mobile. Most the time you just need %