This is a shorties as blog posts go, but a goodie, and certainly one for future Rem to read.

My default machine for development has a trackpad for input. Both in the laptop state and when I have it connected to an external monitor. Up until recently, I had no idea that other users were seeing a very different view of my web pages than I was.

UK EVENTAttend ffconf.org 2024

The conference for people who are passionate about the web. 8 amazing speakers with real human interaction and content you can't just read in a blog post or watch on a tiktok!

My trackpad was playing up (bluetooth interference or something) so I switched to a mouse for input. At which point, all of a sudden, solid white bars started popping up all over the place:

Empty scrollbars appearing when not needed

These empty scrollbars (bottom right - twice) serve no purpose and don't really go with the aesthetic of the web site.

Removing the scrollbars was easy, and dosh darnit, obvious:

#tiles {
  overflow: scroll;
}

Should have been:

#tiles {
  overflow: auto;
}

Then the scrollbars appear as and when needed. I've been doing web dev for two decades now and I know what this property does. The problem was, I didn't see the actual effect of changing it until I plugged my mouse in to my computer.

So, to get eyes on this UI quirk, without having to constantly swap out my input device, I can use the general macOS setting of "always show scrollbars" - even if I turn it on and off πŸ€¦β€β™‚οΈ

How to always show scrollbars

Filing this post under: things I shouldn't have to write to future Rem about.