Open tbredin opened 3 years ago
Possible workaround:
// hide the scrollbar on the body
body {
overflow: hidden;
}
// requires a div container around your app to handle the scroll
body > div {
overflow-y: auto;
overflow-x: hidden;
height: 100vh;
// unsure if this is really needed (see comment below)
-webkit-overflow-scrolling: touch;
}
This will work because the scrollbar you'll now see is on the inner div, whereas the body is always the full width of the browser so matching the equivalent CSS media query.
I haven't tested this thoroughly yet, and from memory it might have issues on some touch devices that need -webkit-overflow-scrolling: touch;
on scroll containers to reproduce their momentum scrolling behaviour.
The window width this tool reports is not correct when a scrollbar is present.
eg: I am seeing
width: 753
when my browser is actually 768 px wide, showing my >767pxlg
layout from my css, but still reporting incorrectly asmd
by this utility because it is not considering media queries (which include scrollbar width).Looks like its querying the inner width rather than including the scrollbar in its calculations. CSS media queries will measure your screen including the scrollbar.
Testing in Chrome 87.0.4280.141