It is a bit of recommendation for builders on Macs I’ve heard fairly just a few instances, and I’ll echo it: go into System Preferences > Common > Present scroll bars and set to at all times. This isn’t about you, it’s in regards to the internet. See, the issue is that with out this setting on, you’ll by no means expertise scrollbar-triggered format shifts, however everybody else with this setting on will. Because you wish to design round not inflicting one of these jank, you need to use this setting your self.
Right here’s Stefan Judis demonstrating that utilization of viewport models will be one of many causes:
As we speak I realized somewhat CSS truth I wasn’t conscious of. Viewport models usually are not taking scrollbars into consideration and may set off overflows simply.
Discovered on the @polypane weblog: https://t.co/RpTnwzrYcA
Video alt: Instance displaying that 100vw can set off overflows. pic.twitter.com/JXakqV3Vna
— Stefan Judis (@stefanjudis) August 22, 2021
There, 100vw causes horizontal overflow, as a result of the vertical scrollbar was already in play, taking over a few of that area. Feels extremely unsuitable to me someway, however right here we’re.
Stefan factors to Kilian Valkhof’s article about coping with this. The traditional fixes:
The simple repair is to make use of width: 100% as a substitute. Percentages don’t embody the width of the scrollbar, so will routinely match.
In the event you can’t do this, otherwise you’re setting the width on one other aspect, add overflow-x: hidden or overflow: hidden to the encircling aspect to stop the scrollbar.
Kilian Valkhof, “Tips on how to discover the reason for horizontal scrollbars”
These are hacks, I’d say, since they’re each issues that aren’t precise matches for what you had been desirous to do.
Thankfully, there may be an incoming spec-based answer. Bramus has the inside track:
A side-effect when displaying scrollbars on the net is that the format of the content material would possibly change relying on the kind of scrollbar. The scrollbar-gutter CSS property —which can quickly ship with Chromium — goals to offer us builders extra management over that.
Bramus Van Damme, “Forestall undesirable Format Shifts brought on by Scrollbars with the scrollbar-gutter CSS property”
Sounds just like the trick, and I wouldn’t be stunned if this turns into a quite common line in reset stylesheets:
physique {
scrollbar-gutter: secure both-edges;
}
That makes me marvel although… it’s the <physique> when coping with this on the whole-page degree, proper? Not the <html>? That’s been bizarre previously with scrolling-related issues.
Are we really going to get it throughout all browsers? Who is aware of. Appears considerably doubtless, however even when it will get shut, and the habits is specced, I’d go for it. Feels progressive-enhancement-friendly.
The put up Scrollbar Reflowing appeared first on CSS-Tips. You’ll be able to help CSS-Tips by being an MVP Supporter.
0
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!