
Scrollbar Blindness - kadfak
https://svenkadak.com/blog/scrollbar-blindness
======
supernova87a
I have to pile onto the criticism of the hidden scroll bars, and other similar
features (like the hidden buttons of PDF viewers now, such as in Chrome).
Discoverability is a problem.

For anyone (cough, elderly parents) who aren't adept at discovering hidden
features, these things can be utterly mind-boggling and frustrating. Even I
was stumped for a good minute the first time trying to print/save/download a
PDF when that "feature" came out.

I don't really need the small sliver of menu space in PDF view to be reclaimed
-- and for what, a "clean" look? Those are real and important functions I
desire. What I actually need is for news and blog sites to stop covering 1/4
of their vertical window space with hovering frames, ads, and banners asking
me to subscribe. Which, by the way, subsequently don't properly calculate into
that now hidden scroll bar's movement and cause you to overshoot the
displayable area when paging down. End rant.

~~~
reaperducer
_For anyone (cough, elderly parents) who aren 't adept at discovering hidden
features_

You don't even have to be elderly.

The 20-somethings in the office (pre-pandemic) had no idea that on an
inconsistent smattering of Apple apps, if you pull down, a hidden search bar
magically appears.

How did that conversation go?

Dev: Where do you want the search bar to go?

Designer: Put it somewhere that no one will ever see it, or ever think to look
for it.

Who thought that was a good idea?

I think people in the SV/HN bubble play the "what about the elderly?" card too
often, because we're afraid to admit that we, too, don't know how stuff works
anymore.

~~~
baggy_trough
Even worse than undiscoverable features are land mine features, where some
subtle gesture triggers a wild and unwanted mode change. Extra credit if the
mode change is hard to get out of.

~~~
Klathmon
There's a windows feature like this which I hate with a passion. If you grab a
window and shake it side to side, it minimizes all open windows...

So sometimes I'll grab a window to move to my left monitor, decide instead I
want it on the right one, and suddenly everything is gone and I now need to go
open every single window one at a time. It even took me months to understand
that the shaking was what caused it. I would just sometimes be working and
suddenly everything is gone and I had no idea why.

~~~
eatingCake
That thing is the worst!

    
    
      HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Advanced
    

set DisallowShaking dword to 1

~~~
voldacar
Honest question: where do you discover registry stuff like this?

~~~
coldpie
Google "Windows disable shaking".

~~~
SilasX
lol, the pinnacle of feature discoverability...

~~~
CarbyAu
Oh yeah. Google to:

\- discover which registry key

\- discover how to craft shit in a game

\- to find where my Android setting is and what the searchterm/keyword for it
is.

Without google/duckduckgo 80% of the options in my world would be
undiscoverable or take waaaay too much time to figure out.

~~~
majewsky
> discover how to craft shit in a game

If you're refering to Minecraft, one of the reasons why Minecraft blew up that
much was that it was around at the exact right time in history: when online
gaming had become viable and let's-plays were just becoming a thing.
Minecraft, as originally intended, is a communal experience where you learn
from the friends you're playing with and from sources on the internet. If I
had to describe Minecraft in one sentence, it would be "let me show you that
cool thing I saw Pewdiepie do last week". The idea has become commonplace in
video gaming at this point, but back then it was fairly new.

(That said, opaque game experiences have been successful before, like the
original Legend of Zelda. I guess the schoolyard served a similar purpose back
then.)

------
dgellow
Another one of such thing: please try to scroll on your site using a mouse
wheel from time to time, even if you're normally using a touchpad (from your
laptop or an external one)!

Lot of fancy homepage with scroll animations are awful on anything that isn't
scrolling as smoothly as a MacBookPro touchpad.

Example: [https://www.apple.com/ipad-pro/](https://www.apple.com/ipad-pro/) is
horrible to use on anything that isn't a mobile device or a Mac.

~~~
bradstewart
Developers (seemingly a lot of them?) use a touchpad as their primary input
device on a regular basis?

I guess this is an example of being in my own bubble, but I can't stand
touchpads. I've used the touchpad on MacBook, like, twice in 2 years.

~~~
liability
I would expect devs who use macbooks to generally use them the same way as the
general population generally uses them. I can't think of a plausible reason to
suspect that developers specifically might prefer traditional mice.

One demographic I _would_ expect traditional mouse usage from would be gamers.
When I play a first person game I always use my trusty old intellimouse.
Otherwise, I use the trackpad unless I'm simultaneously using my mechanical
keyboard, but if my keyboard had an attached trackpad I'd probably be using
that. But mousing in general just isn't a very important to my workflows and
trackpads work just as well as mice for nearly all tasks. Arguably they work
better for some since you don't have to move your hand far from the laptop's
keyboard to use the trackpad, while using a dedicated mouse means taking your
hand completely off the keyboard.

~~~
zeveb
> I can't think of a plausible reason to suspect that developers specifically
> might prefer traditional mice.

I imagine that developers would prefer mice if people who use computers
intensively and knowledgeably prefer mice, and I suspect people who use
computers intensively and knowledgeably _do_ prefer mice, the same way that I
believe we prefer good keyboards and good monitors.

~~~
liability
I prefer good mice and good trackpads to poor mice and poor trackpads. But
trackpads vs mice? Your comment insinuates a that a clear good/bad dichotomy
exists here but I don't think that's generally the case. My above comment
notes one context where I _do_ believe that's true, but in the general case?
For standard desktop interactions? I don't think mice are objectively better.
If anything the proximity of a trackpad makes it better, but that's certainly
debatable.

~~~
wtallis
I feel like a _good_ touchpad (meaning Apple) is superior to most good mice
for general desktop usage. What pushes touchpads clearly ahead is when you
make good use of multi-touch gestures. Using third-party tools under macOS,
about half of my most commonly used keyboard shortcuts can be replaced by
gestures that are quicker and easier than reaching for the keyboard. The
handful of apps with native multitouch and support for haptic feedback through
the touchpad are also really nice.

I still use a mouse for gaming, but I have to replace it every ~3 years
because the buttons start to wear out. That has yet to happen to one of my
Apple touchpads.

~~~
liability
I do like and use multi-touch gestures a lot, though I think 'hot corners' and
additional mouse buttons could probably fill the same roll for me. My
intellimouse (P/N X08-70385) has five buttons and in the past I've mapped
those two extras to forward/backward browser commands and it worked pretty
well. If you can get your hands on an intellimouse, I highly recommend it;
mine is somewhere around 15-20 years old with yellowed plastic but it's still
going strong. Best product ever sold by Microsoft imho.

~~~
wtallis
Forward and back is just the tip of the iceberg. I also have gestures for
switching between tabs (sending Ctrl-Tab and Ctrl-Shift-Tab to applications),
closing and un-closing tabs, opening a new tab, middle clicking, refreshing a
page, scrolling to the top or bottom of the page, maximizing a window. And
that's on top of the gestures provided natively by macOS.

------
m4tthumphrey
I loathe the fact that scrollbars are now hidden. I'm constantly looking for
it to either

a) find out how big the page is b) scroll more precisely

I don't even understand why they would remove them? Who ever complained of a
scroll bar?

~~~
abledon
I wonder if the designers of the systems , after becoming so bored with the
status quo, begin to fetishize the sleek hidden thing that is scroll bar right
now ... like when coders are writing algorithms for say, 10-15 years I bet
their code gets a lot more compact and sleek looking , almost akin to tight 3
character variable leet code solutions etc.. maybe this is just the same
phenomenon tearing its head in the design world , except instead of compact
code blocks its compact UIs that , to a certain metric, yes , the designer has
pushed further on a certain metric ex; see more of the application window
cause scroll bar is hidden, but loses sight of what is lost.

~~~
pilsetnieks
> like when coders are writing algorithms for say, 10-15 years I bet their
> code gets a lot more compact and sleek looking , almost akin to tight 3
> character variable leet code solutions

I have never seen that to be the case unless in an environment with very heavy
constraints like embedded. If anything, a competent programmer 10-15 years in
would skew towards more descriptive and clear variable naming as they've been
burned in the past by having to maintain some of that "leet" code.

~~~
MaxBarraclough
Right on. Readability is a virtue in its own right, compactness is not.

'Cute' code that leverages language features in creative and surprising ways,
generally belongs on code golf competitions, not production systems. If your
code is so 'clever' that only you can understand it, that means you're a bad
programmer, not a good one. (That's not to say you should avoid making
appropriate use of advanced language features for fear of ignorant readers,
though. That's another matter.)

Ada was far ahead of the game here, explicitly prioritising readability over
writeability, in its language design.

With all that said, an experienced programmer may feel less need to write
comments, as their own familiarity with the problem-domain and with the
language will be well developed.

------
TedDoesntTalk
> Alternatively, you can set the scrollbars to be visible at all times by
> setting System Preferences -> General -> Show scroll bars to Always.

Hidden scrollbars recently caused me an extra day of work. I was documenting
all options in hundreds of html select boxes (dropdowns) on a legacy product
being rewritten.

Many of these dropdowns were vertically scrollable, but macOS using Chrome did
not display a scrollbar. I had no idea they were scrollable and missed many
options in my documenta3.

I could not look at the html for it as it was minimized and not easily
searchable.

~~~
IggleSniggle
Here's a tip you can try next time you have a problem like this. Maybe your
task was somehow resistant to this, in which case I really do understand your
pain and am not trying to paper it over, but just in case this could benefit
you or folks like you:

In Chrome:

1) Right click on element you want to grab all of the contents of, and select
Inspect Element. NOTE: If this element is the sort that isn't properly placed
in the DOM and/or disappears when focus/mouse leaves, you can freeze the
current DOM...but the right way to do that will depend on your context.

2) In Elements tab in Dev tools, the element should now be highlighted. You
may need a parent or child element. But hopefully you can find it nearby and
verify you have the right one with the Inspect tooling.

3) Right click on the element that has all your data in the DOM. Select Copy.
Sometimes it will be enough to just Copy Element and paste it somewhere where
you can start organizing the data. But for your task, it sounds like you might
want to write a script for this so you can do it across multiple Elements. So,
try Copy > Copy JS Path.

4) You now have access to the DOM element, even if it was created dynamically
by JS and exists in the Shadow DOM. Try "paste" in the Console tab of Chrome
DevTools.

5) The thing you grabbed might not be exactly the right one. Navigate down to
the level you want to iterate across with the "children" attribute. Example:

    
    
        const myStuff = document
          .querySelector("#output > shadow-output")
          .shadowRoot.querySelector("div > ul > li:nth-child(2)")
          .children[0].children
    

6) You now have an HTMLCollection. You could be done! See if this gives you
what you need:

    
    
        console.table(myStuff, ["innerHTML"])
    

-7) Unfortunately, HTMLCollections are only Array- _like_. Fortunately, it's very easy to convert.
    
    
        const stuffArr = [...myStuff]
    

-8) Now that you have a proper Array filled with HTML elements, you can do any kind of processing you need to grab the data you want.
    
    
        const mappedStuff = stuffArr.map(x=> { /* transform each thing */ }
        console.table(mappedStuff)
    

Hope this helps somebody write a script to remove the tedium from a data
extraction job.

~~~
52-6F-62
> _1) Right click on element you want to grab all of the contents of, and
> select Inspect Element. NOTE: If this element is the sort that isn 't
> properly placed in the DOM and/or disappears when focus/mouse leaves, you
> can freeze the current DOM...but the right way to do that will depend on
> your context._

Just to extend a touch—I use CMD+Shift+C or CTRL+Shift+C countless times in a
day while debugging, or sometimes for this very reason. The shortcut is the
same across browsers—at least Chrome/Edge/FF/Safari.

Instead of right clicking, it'll give you a "target" for selecting an element
and highlight it before clicking.

In the console the selected element will be immediately accessible by `$0`.

Eg,

    
    
        $0.innerHTML;

------
crizzlenizzle
I’ve encountered this last year when I took over a project with a dev staff
solely using Chrome on macOS.

The thing was: We catered for gamers which means Chrome or Firefox on Windows
was the norm. We got a lot of bug reports like “hideous scrollbars in shop
item description” or “hideous scrollbars in menu” where the devs were puzzled
about the bug reports.

------
chrismorgan
Strongly related: viewport units (vw, vh, vmin, vmax) are fundamentally and
irreconcilably broken if your document has scrollbars, because they include
the size of document scrollbars, so that 100vw is equal to 100% + 17px if you
have a 17px wide scrollbar there (the most likely value on Windows), so now
all of a sudden you have a horizontal scrollbar too. Or your nicely calculated
layout that thought that 33vw + 33vw + 33vw < 100% is now wrong and wrapping
the third block on screens less than 1700px wide. There used to be a weird way
of opting out of scrollbar inclusion (I think it involved `overflow: scroll`
and something else on the root element, I think, but I don’t remember the
exact incantation), but Firefox was the only browser that implemented it, and
no one else wanted to (they said “no one wants this”—untrue, I say—“and it’s
weird and inconsistent”—which _was_ true).

We need a new set of units that excludes document scrollbars. Or a constant
like env(scrollbar-width) that represents the scrollbar width so that you can
subtract it yourself, which would be useful in a few other places as well
(instead I’ve done the likes of `var(--scrollbar-width, 20px)` and calculate
and define --scrollbar-width on the root element in JavaScript).

~~~
RonanTheGrey
I dealt with this just a few days ago. A client's design was mocked in webflow
and it decided to use 'static' for the header at 100vw. Which meant that on
browsers that hide the scroll bar, the page jiggles left and right every time
you scroll.

That was fun to fix because I had to rebuild the entire header since a ton of
other webflow-generated CSS depended on that thing being static.

------
chias
I need to use a MacBook as my work machine (for a little over three years
now), and generally have a strong dislike of the platform. It's just similar
enough to Linux to lull me into believing that I kinda know what I'm doing,
but just different enough to make me feel incompetent whenever I try to
actually do anything nontrivial.

    
    
        System Preferences -> General -> Show scroll bars to Always.
    

I stumbled across this little gem about a year ago, and has been one of the
bigger quality-of-life improvements I've found on this machine.

~~~
mbar84
The other being

    
    
        System Preferences -> Keyboard -> Modifier Keys
    

and map Caps Lock to Escape

~~~
snazz
Or Control, depending on which you're used to. Every time I try to use Windows
I'm surprised that there's no easy-to-access setting for remapping Caps Lock
like there is on every Linux DE and macOS.

~~~
saagarjha
You can really have it remapped to anything, really. Mine is remapped to F18
via hidutil to serve as a "hyper" key.

------
matsemann
Yes! Far too many developers now only check that the page renders nicely on
Chrome on their expensive macbook. While most of their users may be having a
less than stellar screen and don't see the contrasts, run old hardware and a
different OS+browser combo.

~~~
corobo
Same complaint with contrast aye

Yes your giga HD retina Mac displays these colours perfectly, I'm sure it
looks great. On my screen however I can't read a damn thing.

~~~
diegoperini
Kind of an off-topic but recently I noticed capturing a gameplay video of an
HDR-enabled video game with any kind of software (OBS, Twitch Studio, GeForce
Experience, FRAPS, Discord) also produces terrible results. This happens even
if I capture the entire monitor or just the app window. Both OpenGL and
DirectX games suffer from this.

How one can tell whether what you capture/develop is what you will see without
testing it on a second monitor? What is the subject I must do research on to
learn more about this?

I'm not just talking about color spaces, but also how these multiple software
communicate image data in a lossless way, how window modes (fullscreen,
borderless, windowed) affect these flows, where HDR stands in this.

~~~
formerly_proven
That's color management. A surprisingly fucky area from an application
developer's perspective, because pretty much only DirectX 11/12 and Vulkan
even have that concept -- and both DXGI and Vulkan are pretty limited [1].
Obviously, HDR and non-sRGB color spaces only work windowed in Windows,
because DWM does scRGB, everywhere else your app needs to be in exclusive
fullscreen. Note that Wayland on Linux doesn't support exclusive fullscreen,
and since Wayland only does 8-bit sRGB, nothing on Wayland can use anything
other than 8-bit sRGB. This might be fixed eventually (guess it'll take about
as long as it took for GIMP).

As a general rule of thumb, if it has anything to do with colors and comes
from either computer or photography people, there's a solid 99 % chance it's
broken or doesn't even know what color is. If you want to know how it's done
right, you gotta look at how the "moving photos" people do it.

(Note: "everything" for me means "everything that's not Apple", because I cba
to care about those snowflakes)

[1] Yes, yes, OpenGL has sRGB types for framebuffers, which doesn't work on
half the devices in the wild (on the other half it applies the sRGB gamma
function to linear sRGB data) and isn't meaningful anyway, because we _don't_
want to use sRGB. DXGI only does Rec.709 and Rec.2020, no DCI P3, and it also
treats everything that's not HDR as sRGB.

~~~
diegoperini
> If you want to know how it's done right, you gotta look at how the "moving
> photos" people do it.

So basically, all I need is a software which can do post-capture tonemapping
on captured pixels before streaming the frames.

------
marmshallow
While folks are rightfully bashing macOS’s hidden scroll bars, I would like to
advertise an iOS feature that is actually pro-scroll bar. As of iOS 13, you
can grab the scroll bar to scroll at hyper speed rather than repeatedly
flicking the screen. Not sure if there’s a proper name for this feature but
it’s explained here [https://www.idownloadblog.com/2019/08/05/scroll-faster-
iphon...](https://www.idownloadblog.com/2019/08/05/scroll-faster-iphone-ipad-
tutorial/)

~~~
plorkyeran
We used to call that "using the scroll bar".

~~~
saagarjha
iOS devices were not nearly performant enough to allow that until recently ;)

~~~
olyjohn
Not sure if you're being serious or not... I mean I thought these iPhones were
faster than PCs. I've been able to scroll since I had my first 486.

~~~
saagarjha
I'm being serious. The first iPhones were years behind comparable desktop
hardware of the time. It's only recently that iPhones have caught up and
surpassed them.

------
Santosh83
Increasingly many sites are opting for overlay scrollbars that are exceedingly
difficult to actually use. It's almost as if they don't want you to use the
scrollbar yet provide one for compliance. They are often very thin (just a few
pixels) and coloured dark gray upon black background and won't expand to a
bigger size until you successfully squint and hunt it down and precisely
position the pointer over it.

~~~
Hizonner
That's because the "designers" don't give a shit about the users' actual
needs. They just want the thing to be pretty. They'll also fuck with it every
once in a while, making random pointless changes, just to keep the look
"fresh". Way too many artistes can easily sneak onto your UX staff.

Also watch out for people from marketing and the like who put pressure on the
UX people to do that sort of thing. People who don't actually know how to make
anything work, and don't have to actually _use_ it to get work done, tend to
be obsessed with how it looks.

A few casual users who don't actually need to get anything done will usually
support this kind of time-wasting idiocy, and the offenders will point to
their feedback for validation. Unfortunately people who write reviews are
often in that category, since they rarely make practical use of what they're
reviewing.

------
codingdave
> If you are a front-end developer that uses macOS, I kindly ask you to
> dedicate a little more attention to how the websites you create behave on
> platforms other than your own.

I'd take that one step farther - no matter what platform you code on, test
your UX on all the others.

~~~
geerlingguy
I'm looking at you, all sites that only work on Chrome and break in subtle
ways on Firefox or Safari.

~~~
wott
The worst are sites which get broken every other year (each time they are
redesigned/rewritten) whereas they provide nothing more, feature-wise, than
what they provided 15 years ago. And yet it forces you to update your browser
to one that provides the latest compatibility with the latest Chrome
"feature".

------
apocalyptic0n3
> Alternatively, you can set the scrollbars to be visible at all times by
> setting System Preferences -> General -> Show scroll bars to Always.

One of the best things I think I've done for quality purposes is require all
developers, QA team members, and project managers have scrollbars turned on at
all times. It's sent the number of sites with hidden overflow in production
down to near-zero for us. Someone, somewhere down the line will end up seeing
that your page is 300px wider than the viewport before it hits production. And
because that usually indicates other problems (often related to
accessibility), it usually has a domino effect of discovering other issues
that need to be fixed.

It has definitely made a marked improvement to the quality of our work, and I
recommend everyone require their teams using Macs to require scrollbars be set
to "Always"

------
jakub_g
If you read between the lines, you should understand that the root cause of
issue is the macOS developer monoculture.

All you need is _one_ Windows or Linux-based developer in your team to catch
those kind of issues. But so many dev teams are macOS-only those days,
whereas, apart from US and 2-3 other rich countries, 80%+ or even more of
actual desktop users are Windows-based.

(There are many other problems with macOS monoculture, for example, the spread
of ultrathin fonts that look nice and crisp on retina macbook but result in
very low contrast rendering on Windows).

US-based devs: outside of your country (that is, >95% of humanity), most
people _do not_ have a Mac, an iPhone, nor use MM/DD/YYYY dates and 12-hour
clock.

~~~
vbsteven
I think the macOS monoculture is going to go away in the next few years
because on one side macOS is becoming more and more developer hostile with
each release and on the other side WSL (and WSL2) is improving the Windows
developer experience a lot.

I use Windows as my daily driver OS now for both native/web/mobile/devops work
and I expect to see more and more developers making that same switch in the
coming years.

~~~
xur17
For folks considering the switch, I highly recommend considering linux as
well. I've used both macOS and ubuntu as a development environment, and bug
wise they are on par, but linux really excels at having a true "native"
development environment. Docker without a weird VM, true bash, etc.

~~~
hellofunk
To suggest that “bug wise“ it is the same between Mac and Linux is a bit of a
stretch. I work in a team where the developers are mostly split between Mac
and Ubuntu. Guess which ones often have problems joining zoom meetings or
attaching their machines to a projector for a presentation? There are a lot of
things that you generally don’t have to worry about much if you’re using a
Mac. I’m not gonna say that one of these is better than the other, but to
suggest they have equivalency wrt common scenarios is a bit strange.

Also, Mac is a certified UNIX environment, it is native.

~~~
Vinnl
I think the corollary is "consider Ubuntu, but still don't skimp on hardware".
Buy a proper laptop that ships with Ubuntu, buy a proper connector cable if
you need one, etc.

~~~
saagarjha
I don't think paying more for hardware significantly changes the problem that
was brought up.

~~~
olyjohn
I think what he is saying is, don't buy a cheap-ass Dell that runs Windows
10S, then expect to be development powerhouse where all the hardware works
properly. He is suggesting buying a developer-oriented laptop that is designed
and supported to be running Linux. You'll have less weird hardware quirks that
way.

~~~
Vinnl
Yep, that's exactly what I meant - and peripherals too. I'm sure a big reason
Apple products don't have problems video calling or connecting to projectors
is high-end hardware, and I don't think the difference between MacOS and
Ubuntu on comparable hardware is anywhere near as striking as their
reputations would have you believe.

~~~
zbentley
I really, highly doubt that. Autodetecting and using proper settings for a
newly-discovered display device (projector) is fundamentally a software
consideration, not hardware: the hardware into which you connect the display
is capable of talking to it (maybe not at ideal resolution depending on specs,
but whatever), but the OS needs to discover, detect, and configure the new
connection properly.

The same is true for Zoom: things like accelerated video streaming are
universally supported on laptop GPUs, but software support is spotty for some
apps/OSes. Things like screen sharing are 100% software-side.

While I'd love to use a Linux workstation (and often do), it's simply not
there yet in those areas. That has nothing to do with "high-end hardware" and
everything to do with less robust software support than many alternatives--
including MacOS.

I guess you could make the case that because MacOS has to support fewer kinds
of hardware, they can spend more time on making software support robust, but
I'm neither convinced of that argument nor convinced that's what you meant by
your post.

~~~
Vinnl
You'd think that, but once I replaced my €5 AliExpress connector cable by a
proper one, suddenly I haven't had any issues with projectors any more.

Likewise, if you use an underpowered laptop, or one for which Ubuntu doesn't
have proper drivers, you're going to have a hard time using Zoom.

I'm not saying that you'll never have issues (which I'm sure holds for MacOS
as well), or even that you might not have slightly more issues than on MacOS
(see your last paragraph), but things are definitely not as bad as comments
online would have you believe, because many of those _can_ be ascribed to
issues like I mentioned above.

------
tomconnors
I've been guilty of this. Normally I like to blame CSS for all of my personal
failures, but I think the definition of "overflow" is intuitive enough. I was
hesitant to turn on visible scrollbars system-wide because I thought it might
be ugly. I did and it's not, so I second the author's suggestion to do that.

------
dlevine
I think part of the problem is that this "feature" masks the need to properly
understand scroll behavior (at least if you only use platforms that auto-hide
scrollbars).

Recently, we were doing a bug safari for a new product feature that was about
to launch. I noticed that an element had a scrollbar when it shouldn't, and
filed a bug. One of the developers picked it up, and first said "not a bug. I
don't see it on my computer." I showed him the bug on my machine, and he
looked at it for a few minutes before saying "I don't know how to fix it." I
pointed out that the overflow-x was set to "scroll" in the CSS for that
component, and he could just set it to "auto" to fix the behavior (since the
scrollbar should never show up in normal usage of that feature). It turns out
that he didn't even know "auto" existed.

------
CarbyAu
Hidden features extends to many things.

On NTFS you can hide an arbitrarily large file in the "Alternate datastream"
of any file. Explorer doesn't show you alternate datastreams and certainly
doesn't show you they are possible.

You can use VLC to play a bluray from what appears to be a 1kb text file in
Explorer.

If you have that on a USB stick, the properties of the USB stick will reflect
the capacity loss of the bluray image. But Explorer won't show you why or
which file has it...

[https://blog.foldersecurityviewer.com/ntfs-alternate-data-
st...](https://blog.foldersecurityviewer.com/ntfs-alternate-data-streams-the-
good-and-the-bad/)

------
liminal
Hidden scrollbars are just terrible UX all round for so many reasons:

\- Discoverability: You don't even know if a container is scrollable at all
until you try.

\- Orientation: You don't know where you are in a document until you scroll to
make the bar appear, and then you have to notice it before it disappears

\- Usability: It's much harder to target the scroll thumb to drag it. To find
it you need to again scroll first, then notice it, then target it with the
mouse, all under time pressure before it disappears.

If you're on MacOS, do yourself (and your users) a favor and set them to
always show.

------
Aardwolf
"introduced an enhanced scrollbar behavior that made scrollbars hidden by
default"

That's not enhanced at all, it's horrible, and scrollbars should be more
contrastful and bigger again

~~~
Spivak
But that’s silly when the preferred method of scrolling is a mouse wheel or a
swipe nether actually require the scollbar as a touch/click target.

The actual useful UI left is “does this thing scroll”, “where on the page am
I”, and “the grab and flick” gesture on touch to scroll faster.

In hindsight I think the mistake was having scrollbars be part of the document
flow instead of hovering invisibly over the content until they’re needed.

~~~
kevincox
The scrollbar does still provide valuable context over what scrolls, how big
the scroll area is and how far you have scrolled. The second two you can solve
by just scrolling a little to see the popup scroll indicator but
discoverability is huge and I often am confused by this when I am using macOS.

------
ZeWaren
I use an old IBM laptop with only a pointing stick (the red nipple in the
middle of the keyboard).

I don't mind having to move my mouse to the scrollbar and drag it to scroll
documents or webpages (when I can't use the keyboard for that already).

This was fine until a few years ago when scrollbars starting to hide or become
super thin. I should not have to concentrate to be able to target scrollbars
with my cursor.

If you're working on UX/UI design, please remember that not everyone has or
uses a scrollwheel on their mice.

------
l0b0
While on the subject of people creating user-hostile experiences, try
disabling "Allow pages to choose their own fonts, instead of your selections
above" in Firefox. Now instead of a different set of fonts for _every single
website_ because of some misguided form-over-content design wankery I can read
things with one less distraction.

~~~
SilasX
I actually tried that, and it has its own downsides. Sometimes pages get icons
by drawing from characters in higher codepoints, and so the icons will get
randomly replaced with Greek letters and random symbols.

------
dusted
Hiding scrollbars is one of the worse ux antipatterns.. it makes it difficult
to see IF there is more content and which part can be scrolled (if any)

------
KayL
A lot of developers I worked with only using their MacBook & iPhone to do
tests. Many sites do not fully responsive also. For example, the github.com
only support 1280px width and above. Below that, padding & buttons rendered
incorrectly.

And I think this is a trend in the open-source that developers reject Windows
patches, or never really try to fix the bugs.

Now a lot of tools are only designed for MacOS first. Linux is extra because
it's easy to migrate. For example, Facebook Watchman. It's about 5 years but
still unstable for Windows I think.

And many web tools, even Android development, I found it's no errors in MacOS
but have to fix the config or do extra yourself to get it to work properly.

------
zeveb
> In 2011, Apple released Mac OS X Lion which introduced an enhanced scrollbar
> behavior that made scrollbars hidden by default.

I don't think hiding scrollbars can really be termed an enhancement; 'mistake'
at best or 'user-hostile behavior' at worst seem more appropriate.

The original Macintosh GUI succeeded so well because it made it so easy to see
what was possible. It laid an awful lot of stuff out right there on the screen
in front of the user, and what was hidden was easy to get at. They spent a ton
of time testing an improving usability. Modern macOS, OTOH, just doesn't feel
right anymore; I suspect it is designed to look good, not to be usable.

------
wtallis
I like how this page also has four levels of scrollbars, and the title has
two. It's an interesting sort of border effect.

------
brundolf
I noticed this a few years ago on a project I was working on, and ever since
I've always enabled scroll bars on my work laptops.

More recently, a few weeks ago we had a bug in our app that was caused by an
India time zone. Our company is fully U.S.-based so nobody noticed. Since then
I've kept my computer in the India time zone so that time zone issues are
readily apparent. I've already caught another one since then.

There's a more general principle here of "user empathy": configuring your
environment so that you're in the same boat as your users.

------
chrismorgan
I have noticed this too. This page itself immediately distressed me with its
deliberate overdone use of `overflow: scroll`, so much so that I honestly
almost left it without reading, which seems a little weird when I reflect on
it, but… ugh, multiple useless scrollbars. I think this must be what people
mean when they describe something “triggering” them.

I think there are two parts to the problem: ① a popular developer platform
using overlay scrollbars; and ② the fact that `overflow: scroll` _sounds like_
what people want, when it’s actually not (as you say, they wanted `overflow:
auto`). If I could rewrite the history of just this one property, I’d rename
`scroll` to `always-show-scrollbar` or `show-scrollbar-even-if-insufficient-
content-to-scroll` or similar. Or maybe split `overflow` in two and use
`scrollbar-show: always;`.

Hmm. I wonder if we _could_ convince browser makers to kill off `overflow:
scroll`, making it equivalent to `overflow: auto` due to rampant abuse
(there’s precedent for this sort of thing), and replace it with a new, more
clearly-named property `scrollbar-show: always`. (And
`scrollbar-{x,y,inline,block}-show` to go with it.) Maybe `always` wouldn’t be
quite the right keyword, given that it wouldn’t be affecting the behaviour of
platforms with overlay scrollbars. But this actually sounds both reasonable
and feasible to me, given that `overflow: scroll` is subject to rampant abuse
due to misunderstanding and was basically only a tiny quality of life thing
for certain corner cases in layouts anyway.

------
umvi
Wow, that's pretty bad. I'm guessing the front end developers of those sites
just do everything on a Mac and never check how the site looks on Windows or
Linux.

~~~
scaryclam
Even worse, they tend just do it just on Mac and only in Chrome.

------
nprz
The reason `overflow: scroll` is a better default is the need to account for
every screen size or possible dynamic content. If overflow is set to `hidden`
or worse `visible` your UI is going to break on some screen sizes. So
basically you need to decide if you want extra scroll bars for some screens,
or broken UI when a user shrinks the browser. It's very time consuming to get
everything right on every screen size on every browser on every OS.

~~~
chrismorgan
`overflow: scroll` shows the scrollbars always, and should just about never be
used. >99.99% of the time, you want `overflow: auto` instead, which only shows
scrollbars if they will _do_ anything.

------
spectramax
Designers don’t get it. What do they teach in design schools these days?
Genuine question. I hope stuff like this is brought up? How do you even become
a UI designer?

~~~
devmunchies
I took a "designing the user experience" class in as part of my computer
science curriculum (not in the design or art school).

It was much more rigorous than other design content I watch (e.g. skillshare,
youtube), which are usually based on how something looks (emotion) and not the
actual efficiency or usefulness of the design.

In the industry we really should distinguish between UI Architects and
Aesthetic Designers.

------
markus_zhang
On many Mobile Apps I also found that the scroll bar is just a small dot and
it only appears when I do scroll a bit, so it's very difficult to see how much
is left to read. This is particularly annoying because I have to scroll down
to estimate how much is left and then scroll up back to where I was.

I have on idea what school of thought has brought forth the no-UI UI but I
absolutely think they are idiots.

------
phpdave11
I like how the title of the article has a hidden scroll bar (reading on
iPhone).

~~~
smu3l
Indeed. I just set scrollbars to always show on my Macbook per the author's
suggestion and there are 4 scrollbars on their page!

Makes me wonder if I'm missing the point of the fairly simple post?

~~~
asadkn
That's clearly intentional to make the point. Made me appreciate the article
more.

~~~
smu3l
Ah! It's only on that post, not the rest of the site. Clever.

------
dghughes
Ooo those hidden/slim scrollbars are annoying. It's as bad as an auto-hiding
taskbar.

When I first saw it the first thing I did was to find a way to get rid of it.
In Windows it's: Settings > Ease of Access > "Automatically hide scroll bars
in Windows" > Off

------
simonebrunozzi
Great read, and nice examples to show how important the issue is (at least,
relative to web design).

This just reminds me of how lovely it would be to have complete
interoperability between every browser, every OS, mobile or desktop... And how
unlikely it is to happen in the near future.

------
pwinnski
I'm on MacOS and have `Show school bars: Always` set, but I still wish the
scroll bars were slightly wider.

They're undoing much of what Ive did to MacOS, it's time to include making
scroll bars as big and useful as they used to be!

------
bluedevil2k
Great article! Short read and proves his point excellently by calling out big
sites that are making the mistake he points out. The Snapchat example is the
best, looks terrible on my Windows machine on Firefox.

------
matthewheath
Help Scout have this discoverability problem with dropdown menus - there's no
scroll bar when the content overflows, so I had no idea there were more
options until a colleague pointed it out.

I felt absolutely ridiculous and ashamed after that. So, I make a point of
designing all my software with visible scroll bars and other visible features
that a user could reasonably expect to find without having to hunt or guess.

Sure, it doesn't look as "pretty" but it's so much more useable.

------
Aldo_MX
Whenever I looked for website templates to purchase, I always hated those that
had a jQuery library to "restore" the scrollbar.

I misunderstood the intent and I thought that they were just replacing the
scrollbar to style it, which as a side effect broke the behavior with a mouse
in Windows/Linux, but it took me long to understand that it was because Mac OS
removed them by default and it was not just designers being obsessed about
styling the scrollbars...

------
trilinearnz
I recall a point by Jobs et al. wherein the original case for GUI drop-down
menus was motivated by a clear desire for discoverability, versus the arcane
keyboard shortcuts of the IBM applications of the time.

That stuck with me for a long time, and I remembered it when MacOS and iOS
first began departing from that philosophy with their modern looks. I would
say Jony Ive contributed a lot to this transition from user-friendliness to
design-led, form-over-function.

------
VoxPelli
I would very much want a way to toggle scroll bars on and of within the
browser, eg a Toolbar button that I can add through an extension.

The fact that I can only toggle it at an OS level is pretty bad. I love the
invisible scroll bars and I would prefer to have them in all apps I use
myself, but I do respect the platforms and users who have visible ones, but I
shouldn’t have to choose between my own user experience and testing for their
user experience

------
initself
This trend is sickening. Windows 10 has a nearly 1 second delay when mousing
over the Start Menu scroll bar. Why wouldn't I want a scroll bar there? It is
the primary thing I seek when I click Start.

In the Gmail Admin interface for users, the scrollbar vanishes unless I have
my browser nearly maximized. Do the designers live in a world where their
browser is always nearly full screen?

You'd think huge companies would notice and care about these things.

------
AnonHP
On smaller screens I’m kinda ok with scroll bars appearing only when scrolled,
but what’s with no scroll bars at all on some websites? That irks me like
nothing else. I can’t even figure out how long the page is and whether I can
finish reading it quickly or need to save it for a later time. What do the
designers gain from such user hostile designs? And how are people paying for
such designs without any oversight or reviews?!

------
qwertox
I also have this issue with the disappearing window borders.

I remember on IRIX they were so bold, a real tool to be used. Same on Windows
up to and including Windows 7. Now it's like you have a 2 pixel wide invisible
border, hard to click, which may be the shadow of the window, or at the edge
in the window; it's hard, specially when working over VNC. Nothing is gained
by freeing up those 10 horizontal and vertical pixels.

------
fortran77
> If you are a front-end developer that uses macOS, I kindly ask you to
> dedicate a little more attention to how the websites you create behave on
> platforms other than your own.

I think this is a lost cause. A lot of macOS people are "zealots" and they
feel that anyone who uses anything else is simply "wrong." I've long dealt
with designers like this and realized I can't win.

------
smhmd
Even Google has this problem[0].

[0]: [https://i.imgur.com/kusIhDh.png](https://i.imgur.com/kusIhDh.png)

------
axilmar
And discoverability is the no 1 problem of the command line interface, that's
why a lot of people don't like the command line so much.

It would be a lot nicer if, while typing a command, a list of options came up,
along with a short explanation and example, and by clicking the option the
full documentation for it would come up.

But that cannot happpen, console apps have no connection to a UI.

------
newyorker2
What is the reason for this developer monoculture?

------
tonetheman
This is only a problem for the web because web developers are using broken OSX
to develop.

The amount of hidden-ness/clevery fuckery in OSX is maddening. I would implore
every one to complain to Apple to fix their broken OS.

The web is fine, the garbage developers are putting out is because of the
broken dumpster fire of OSX.

------
mattacular
All valid criticisms. The hidden scroll bar is also really hard to use. It
removes the ability to jump to a position by clicking. It's hard to see
sometimes too.

You'll notice that Apple loves to champion usability (HIG etc) ... except when
it flies in the face of their minimalist aesthetic.

------
abruzzi
this is my most hated Apple "UI modernization." Its not just a problem with
website, apps, even Apple apps don't deal with it well. I always turn on
scroll bars all the time (I do a lot of work with very long documents or
files, and just scrolling with the scroll wheels doesn't cut it for these),
and every time I do a VNC connection using the built in screen sharing app,
the scroll bars are placed in the remote screen area, rather than outside it.
So every time I connect to a remote screen, the first thing I have to do is
enlarge the window so I can see everything.

------
anurag
Oy. Not fun to see Render on the list. We just fixed the horizontal scrollbar!

------
jhanschoo
Note that in some instances `scroll` instead of `auto` is warranted. When a
scrollbar is placed because of `auto`, its contents are laid out differently
than `scroll`, and might cut out some content.

------
MH15
I fell victim to this while implementing my personal website. An easy fix to
be sure, and one that I think is worth it for the hidden scroll bars (which I
prefer), but kind of annoying.

------
wyuenho
This problem is so endemic for so many years now, I wonder why the browser
devtools have options to turn off caching but not option to turn on the scroll
bar during dev mode.

------
eddieh
I really like the dichotomy presented in the argument that I should change my
settings so scrollbars are _always_ visible because they're ugly and not
needed.

------
donatj
As someone who has scroll bars always turned on, I actually added a step in
our CI that forbids `overflow: scroll`. auto is fine, scroll is never OK.

------
abinaya_rl
Woah, Thanks for bringing it up. These are the things that remind web
developers to test the cross-browser compatibility, chrome is not the
universe.

------
ggm
The microsecond of time which is the quantum between seeing the scroll
element, moving focus and it going away again before you can grab it ....

------
JMTQp8lwXL
Another example missing from the list: twitter.com. The navigation (when
logged in) has an unnecessary vertical scrollbar.

------
awiesenhofer
and then there is the new firefox for android which decided to just remove the
scroll bar entirely in its new tab list. so if you have lets say the now usual
amount of open tabs, you don't have any idea where or how far along in the
list you are. i wonder what the reasoning behind that was?

------
fcatus
Let's not forget horizontal scrollbars that cover the last line of a code you
want to copy....

------
abraxas
It was a happy day when I discovered you could disable auto hiding of
scrollbars in OSX.

------
erwinh
I like to hide my scrollbars by putting it into another div with an overflow
hidden

------
edgarvaldes
I dont like the very thin scroll bar in JetBrain IDEs.

------
Pxtl
Problem: Apple breaks the web.

Solution: web developers should change how they do CSS to accommodate Apple.

------
btbuildem
Guilty as charged

------
OOPMan
Asking Mac users to think about the existence of other OSes?

Grab your ptichfors brothers and sisters, we have another heretic to burn at
the stake!

------
bstar77
I have dealt with this problem in an Electron app I designed and support. The
different platform scrollbar behaviors drove me mad because of my insistence
on a common experience.

I really like the hidden scrollbars that Apple settled on. They are easy to
identify by hovering the cursor over scroll-able content and they just act as
an overlay over the content. In windows, the content is actually shifted the
width of the scrollbar which is terrible for UI consistency in some cases.
There is the problem that hidden scrollbars remove the "discovery" aspect of
traditional scrollbars, but I find this to be a very minor loss in practice. I
don't miss having a sliver of a scrollbar for large content blocks.

I ultimately just settled on styling scrollbars in CSS, making them a bit
slimmer and forcing that behavior on the Mac for consistency. Scrollbars look
nice, match my UI look and feel, minimally shift content and look consistent
across all platforms.

I threw away all of the custom JS approaches that try to mimic Apple's
solution because none were perfect and, in every case, introduced new problems
that disqualified them entirely.

~~~
pseudalopex
That's a lot of work to make sure every user's experience on their platform is
inconsistent.

~~~
bstar77
Seems like you responded to the wrong comment.

~~~
pseudalopex
"I threw away all of the custom JS approaches that try to mimic Apple's
solution because none were perfect and, in every case, introduced new problems
that disqualified them entirely."

------
untog
> I kindly ask you to dedicate a little more attention to how the websites you
> create behave on platforms other than your own.

Agreed.

> Alternatively, you can set the scrollbars to be visible at all times by
> setting System Preferences -> General -> Show scroll bars to Always.

Disagree. Now you're using a different UI layout than the vast majority of
your users!

~~~
matsemann
Are your majority of users really using a macbook? Maybe if you're a hip SaaS
startup.

~~~
untog
I mean that a Mac with scrollbars enabled is still a different layout than
Windows or Linux with scrollbars enabled. They all have different appearances,
widths, etc.

------
pcr910303
Really, am I the only person here who can't understand the complaints on
hiding scrollbars? I do agree with a lot of things that resonates HN, but this
is one thing that I have never understood.

Stop complaining about discoverability, everyone that knows how to browse the
web knows how to scroll. It's like worrying whether the user will know how to
use a mouse when you're designing a web page. Scrolling is not something like
shortcuts or tabs - you need it to move around, which means you get to know it
as soon as you start your computer and after the first knowing phase it's
visual clutter.

Also, I would like to ask whether users will usually even want to click on the
scrollbar to move around. Unless the small number of cases where the page is
long and you want to move around quickly (and if you have ever been in that
case, you know that even there using the scrollbar is pretty useless because
it's too sensitive - you are usually less precise when you use a scrollbar,
not more), there's virtually no reason to click it. Computer screen estate is
precious because not everyone is using a 27-inch display (13-inch display
here), so that's a pretty big reason to hide the scrollbar.

~~~
Kaytaro
Maybe I'm missing something obvious, but I can't think of a reason for
scrollbars to exist in the first place. You always have a physical way to
scroll. If a user doesn't know how to scroll, it's a problem with the device,
not your software. The only purpose of the scroll bar is to show your current
position in the page, which doesn't require persistence.

~~~
svachalek
It's sometimes also the only indication that an element is scrollable. Usually
there are other cues, an unfinished sentence or partially clipped
text/graphics, but sometimes you're left with a perfectly plausible looking
clip and would never guess there's more underneath.

