As a collector of websites over on kirbysites.com, I regularly receive website submissions with backend screenshots. If I like what I see, I take a screenshot of the frontend and add the website to the collection. Sometimes I notice issues with their CSS when I take that screenshot and we have a quick exchange about that. It’s fun, I like that direct exchange with the people behind the websites.
But I did notice a pattern:
By far the most common issue? Unexpected scrollbars.
What do the developers have in common? They use macOS.
Unexpected scrollbars?
When working with CSS, you can easily produce horizontally scrolling content by mistake. The usual suspects: fixed widths that exceed the viewport, flex containers without flex-wrap: wrap, grid layouts with rigid pixel values, or long unbreakable words and URLs that get introduced by the client long after development.
The solution is not to set overflow to hidden or clip on these elements. That just hides the problem (and potentially important content). Only in specific cases, like elements with negative margins, this is the right approach.
Ahmad Shadeed has written an excellent guide on common causes of horizontal scrolling that covers these issues in detail. In general, his Defensive CSS approach is brilliant and definitely worth a read.
But even following all of these tips, you’ll still encounter scrollbars from time to time. Or do you?
The hidden problem
macOS hides scrollbars by default when using a trackpad. They call it “Show scrollbars automatically based on mouse or trackpad” in the system settings:
This might look cleaner for everyday use, but it creates a significant blind spot during development. Users with mice, and Windows and Linux users will see scrollbars everywhere. And on touch devices, these additional scrolling axes can feel very irritating.
A simple solution
Well, just set it to “Always show scrollbars”. Duh.
You got used to the clean look without scrollbars? I get it, it’s ~20px of screen real estate!
I’ve recently found this great Raycast extension that lets you toggle the visibility of the scrollbars quickly: Toggle Scroll Bars Visibility. It’s quite handy for switching between development and normal use modes without diving into system preferences each time.
Final thoughts
Enabling scrollbars won’t solve all your CSS problems, but it will catch those sneaky horizontal scrolling issues before they go live. On a related note, is it “scroll bars” or “scrollbars”? 😅
I’d be curious to hear about your thoughts over on Mastodon.