"I have my operating system configured to use visible scrollbars, a feature prominently elevated in macOS' System Settings high enough that it would seem to imply some level of common usage (even though it's not a default). I don't necessarily prefer the behavior this feature enables but I use it as an implied measure of quality when browsing the web . I typically see the following problems:"
"The easiest thing folks can do to workaround this issue is add html { overflow-y: scroll; } to your CSS resets, which can be a great way to very easily reduce those content layout shift issues! But this little snippet adds a scrollbar to every page. To show scrollbars only when they're needed (while keeping space for the scrollbar if it's added later) use the scrollbar-gutter CSS property. scrollbar-gutter is Baseline 2024 Newly Available, so make sure you enhance it with a @supports guard."
Visible scrollbars expose horizontal overflow and make layout issues more obvious. Sites that toggle document-level overflow: hidden for modals can shift page content by roughly 20px. Progressive rendering on slow pages can also cause horizontal shifts as content fills the viewport unevenly. A common workaround is html { overflow-y: scroll; } in CSS resets, which prevents shifts but forces a scrollbar on every page. The scrollbar-gutter CSS property reserves space for potential scrollbars while showing them only when necessary. The scrollbar-gutter property requires a @supports guard because it became broadly available in Baseline 2024 and should be added to reset stylesheets.
Read at Zach Leatherman
Unable to calculate read time
Collection
[
|
...
]