35 ms·

Scrollbar Blindness

877 points by kadfak 6y ago

deleted 6y ago
[deleted]
bluedevil2k 6y ago
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.
matsemann 6y ago
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.
- VoxPelli 6y ago
  To be fair: If they would use a cheap Chromebook, then the outcome in this case wouldn’t be any different
- corobo 6y ago
  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 6y ago
    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 6y ago
      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 6y ago
        > 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.
- jabroni_salad 6y ago
  A couple years ago I actually had to buy a new monitor because everyone decided their login UI was ugly and needed to be ultra low contrast. I had to ctrl+a the page to find the text fields. My eyesight isn't particularly bad, just a minor astigmatism.
wtallis 6y ago
I like how this page also has four levels of scrollbars, and the title has two. It's an interesting sort of border effect.
phpdave11 6y ago
I like how the title of the article has a hidden scroll bar (reading on iPhone).
- smu3l 6y ago
  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 6y ago
    That's clearly intentional to make the point. Made me appreciate the article more.
    - smu3l 6y ago
      Ah! It's only on that post, not the rest of the site. Clever.
- progval 6y ago
  the whole page too; it starts with: <body style="overflow: scroll;"> <div style="overflow: scroll;"> <div style="overflow: scroll;"> <div style="overflow: scroll;">
dusted 6y ago
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)
simonebrunozzi 6y ago
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.
TedDoesntTalk 6y ago
> 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.
- hundchenkatze 6y ago
  > I could not look at the html for it as it was minimized and not easily searchable. Give the Chrome dev tools a try. It "un-minifies" the html making it viewable and easily traversable. https://developers.google.com/web/tools/chrome-devtools/dom/ https://developers.google.com/web/tools/chrome-devtools/dom/
  - Semaphor 6y ago
    And obviously Firefox does the same. https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML https://developer.mozilla.org/en-US/docs/Tools/Page_Inspecto...
- IggleSniggle 6y ago
  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.
m4tthumphrey 6y ago
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?
- untog 6y ago
  > I don't even understand why they would remove them? Who ever complained of a scroll bar? IMO it's all part of this push to combine mobile and desktop UI. On mobile there is a legitimate case to be made for removing them because screen real estate is so precious. But desktop gets clobbered as an unwanted side effect.
  - bb123 6y ago
    I actually think it has more to do with the increasing size and sophistication of the touchpad in Macs. There is no need for a scroll bar when you have a touchpad you can flick (likewise for magic mice).
    - spideymans 6y ago
      Yea on macOS, the scroll bar is less of a scroll bar, and more of a scroll indicator. There just isn’t any reason to click on the scroll bar if you have a trackpad. Notably, when you connect a traditional mouse, the scroll bar automatically becomes thicker (easier to click) and always visible, as mice users do have a reason to click/drag the scroll bar. Seems like Apple had this in mind
      - formerly_proven 6y ago
        > Yea on macOS, the scroll bar is less of a scroll bar, and more of a scroll indicator. There just isn’t any reason to click on the scroll bar if you have a trackpad. I've seen so many web pages whose "fold line" just aligned so neatly with the end of my viewport that without the scrollbar being visible I would've just closed the page, being disappointed that it's just a meaningless hero page with no content. Similarly, if stuff like selection boxes align just right, you simply can't see there are more options without a scrollbar. It just looks like you only have those options that are on the screen right now. It's just plain bad UX coming from Apple.
dgellow 6y ago
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.
- dusted 6y ago
  yes, that's pretty terrible, I always scroll with the mouse wheel, since I'm tool old to be rubbing a plate of glass and not feel like a moron. But this one, made my finger hurt a bit and I din't even make it half way down.
  - vsareto 6y ago
    Try arrow keys for scrolling
  - Tagbert 6y ago
    You can also tap the space bar to scroll a screen at a time
    - sitkack 6y ago
      I believe this will be gone in a couple years. Lots of google properties are over-riding this.
    - mike22 6y ago
      This is broken with floating headers and footers. The scrolling goes over the whole viewport; after each pg dn-equivalent, you need to scroll back up two or three lines to see what was covered by the header/footer.
  - missblit 6y ago
    I have a "Mitsumi Standard Scroll" mouse that has a scroll button that you can hold down instead of a wheel that you have to keep spinning. It's so much easier on the fingers that I'm amazed I haven't been able to find it anywhere else.
tomconnors 6y ago
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.
untog 6y ago
> 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!
- hibbelig 6y ago
  I guess what was meant was to check both settings, i.e. both the default Mac scrollbar behavior and the "Always" behavior. After all, the initial sentence also didn't imply checking _only_ some other platform.
- matsemann 6y ago
  Are your majority of users really using a macbook? Maybe if you're a hip SaaS startup.
  - untog 6y ago
    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.
supernova87a 6y ago
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.
- soco 6y ago
  Especially with the usual screen ratios nowadays, their huge width goes unused 99% of the time anyway. So there's an only 1% incentive from usability side to remove the right vertical scrollbar... As a matter of fact, I actually use in my Firefox vertical tabs stacked left, to spare me some vertical space on the laptop screen.
  - The_rationalist 6y ago
    It's not just about 1% of screenspace, it's about visual pollution that is distracting, it increase cognitive noise and cognitive noise is cancer
    - bobbyT314 6y ago
      Giving the user clear feedback about where they are in a page and how to modify their location should not "increase cognitive noise". It should in fact offload cognitive load from the user onto the interface leaving more room, so to speak, for the user to use for themselves.
  - reaperducer 6y ago
    Especially with the usual screen ratios nowadays My computer is an 11-inch MacBook Air. That means that even if I run Safari full-screen, which is inconvenient, I have only 680 vertical pixels for content. It's amazing how many web sites I run into that throw up fixed-position pop-ups that are bigger than that, and I can't close them or scroll to see their content because the designers or middle managers decided that every person on the planet is rocking a 27-inch 5K display. Usually I just close the window and never visit the site again. If it's important, I break out the dev tools and start invoking display:none until I hit the right element.
umvi 6y ago
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 6y ago
  Even worse, they tend just do it just on Mac and only in Chrome.
Aardwolf 6y ago
"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 6y ago
  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 6y ago
    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.
  - Aardwolf 6y ago
    scrollbar gives visual information and allows me to scroll to whereever I want at the speed I want, scrollwheel only goes at fixed speed I'm talking about desktop computers here by the way, althrough grabbing a scrollbar and going to wherever I want at any speed would be awesome on a phone too. I mean such programs as Konsole, Firefox, and others, in Linux desktop. Scrollbars got thinner and with super low contrast there too
crizzlenizzle 6y ago
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.
Santosh83 6y ago
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.
- keyringlight 6y ago
  Contrast is issue I've found to be annoying, as though UI designers don't really want you to spot it easily and to show the information it conveys. On the windows side I think it's after winxp that they moved away from having color to greys, and then later to solid blocks
- Hizonner 6y ago
  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.
- userbinator 6y ago
  ...and thanks to some apps doing away with window borders completely, as well as everything becoming some drab grey colour, many times I've mistakenly clicked in and activated a different window while trying to manipulate a nearly-invisible "automatically expanding" scrollbar.
codingdave 6y ago
> 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 6y ago
  I'm looking at you, all sites that only work on Chrome and break in subtle ways on Firefox or Safari.
  - acheron 6y ago
    The true spirit of Internet Explorer lives on.
  - wott 6y ago
    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".
pwinnski 6y ago
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!
btbuildem 6y ago
Guilty as charged
AnonHP 6y ago
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?!
jakub_g 6y ago
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.
- ricardobeat 6y ago
  All you need is a round of testing for cross-browser compatibility. It's a pretty much solved problem by now, doesn't take that much time and can be automated. There is nothing stopping every developer from doing it - besides the usual pressure to deliver features in place of proper engineering.
  - dmitriid 6y ago
    > All you need is a round of testing for cross-browser compatibility. It's a pretty much solved problem by now, doesn't take that much time and can be automated. Please show me a solved automated test for the issue in the post.
    - IncRnd 6y ago
      There are several online cross-platform browser testing services. You don't even need a non-mac yourself. If the company is large enough to alwayus test locally, most modern testers will use VMs or some sort of containerization for repeatable determinism. This is absolutely a solved problem.
      - reaperducer 6y ago
        Online isn't real-life. You can test in a VM, but it will never be the same as testing on actual hardware. Even my craptastic company gives me a bunch of devices to test on. And I very deliberately specify very low-end versions of the machines so that I can test against worst-case-scenarios. It's a bonus that sub-optimal hardware is cheap as chips. My favorite testing device is a $20 burner phone I picked up in the supermarket checkout aisle. If the web site works on that piece of poo, it'll work on anything. Right now I'm waiting for UPS to deliver an old iPad from Alaska that the IT department bought for me off of fleaBay, just so that I can test on sub-optimal actual hardware.
apocalyptic0n3 6y ago
> 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"
spectramax 6y ago
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 6y ago
  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.
fortran77 6y ago
> 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.
pcr910303 6y ago
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 6y ago
  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 6y ago
    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.
- jordache 6y ago
  you totally missed the point. MacOS default UX w/ the hidden scrollbar represents a tiny portion of any consumer-facing web product's user base. So what is the value of a development team, not experiencing the same UX as the vast majority of their users?
VoxPelli 6y ago
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
chias 6y ago
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 6y ago
  The other being System Preferences -> Keyboard -> Modifier Keys and map Caps Lock to Escape
  - snazz 6y ago
    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 6y ago
      You can really have it remapped to anything, really. Mine is remapped to F18 via hidutil to serve as a "hyper" key.
    - spixy 6y ago
      you can easily remap keys with PowerToys... https://github.com/microsoft/PowerToys https://github.com/microsoft/PowerToys
zeveb 6y ago
> 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.
abraxas 6y ago
It was a happy day when I discovered you could disable auto hiding of scrollbars in OSX.
matthewheath 6y ago
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.
smhmd 6y ago
Even Google has this problem[0]. [0]: https://i.imgur.com/kusIhDh.png https://i.imgur.com/kusIhDh.png
marmshallow 6y ago
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-iphone-ipad-tutorial/ https://www.idownloadblog.com/2019/08/05/scroll-faster-iphon...
- plorkyeran 6y ago
  We used to call that "using the scroll bar".
  - saagarjha 6y ago
    iOS devices were not nearly performant enough to allow that until recently ;)
    - olyjohn 6y ago
      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 6y ago
        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.
- aendruk 6y ago
  > you can grab the scroll bar to scroll at hyper speed I think it's called using a scrollbar. :) That's typically how they work. To spare readers the content marketing piece: tap and hold to grab it.
  - snazz 6y ago
eddieh 6y ago
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.
initself 6y ago
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.
bstar77 6y ago
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 6y ago
  That's a lot of work to make sure every user's experience on their platform is inconsistent.
  - bstar77 6y ago
    Seems like you responded to the wrong comment.
    - pseudalopex 6y ago
      "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."
liminal 6y ago
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.
ZeWaren 6y ago
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.
mattacular 6y ago
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.
newyorker2 6y ago
What is the reason for this developer monoculture?
nprz 6y ago
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 6y ago
  `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.
anurag 6y ago
Oy. Not fun to see Render on the list. We just fixed the horizontal scrollbar!
Pxtl 6y ago
Problem: Apple breaks the web. Solution: web developers should change how they do CSS to accommodate Apple.
deleted 6y ago
[deleted]
markus_zhang 6y ago
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.
chrismorgan 6y ago
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.
abinaya_rl 6y ago
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.
abruzzi 6y ago
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.
chrismorgan 6y ago
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 6y ago
  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.
edgarvaldes 6y ago
I dont like the very thin scroll bar in JetBrain IDEs.
JMTQp8lwXL 6y ago
Another example missing from the list: twitter.com. The navigation (when logged in) has an unnecessary vertical scrollbar.
awiesenhofer 6y ago
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 6y ago
Let's not forget horizontal scrollbars that cover the last line of a code you want to copy....
wyuenho 6y ago
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.
OOPMan 6y ago
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!
KayL 6y ago
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.
MH15 6y ago
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.
donatj 6y ago
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.
ggm 6y ago
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 ....
l0b0 6y ago
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 6y ago
  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.
CarbyAu 6y ago
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-streams-the-good-and-the-bad/ https://blog.foldersecurityviewer.com/ntfs-alternate-data-st...
brundolf 6y ago
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.
dghughes 6y ago
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
trilinearnz 6y ago
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.
Aldo_MX 6y ago
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...
jhanschoo 6y ago
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.
dlevine 6y ago
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.
erwinh 6y ago
I like to hide my scrollbars by putting it into another div with an overflow hidden
axilmar 6y ago
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.
tonetheman 6y ago
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.
qwertox 6y ago
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.

877 points by kadfak 6y ago

deleted 6y ago

[deleted]

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.

matsemann 6y ago

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.

VoxPelli 6y ago
To be fair: If they would use a cheap Chromebook, then the outcome in this case wouldn’t be any different
corobo 6y ago
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 6y ago
  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 6y ago
    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 6y ago
      > 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.
jabroni_salad 6y ago
A couple years ago I actually had to buy a new monitor because everyone decided their login UI was ugly and needed to be ultra low contrast. I had to ctrl+a the page to find the text fields. My eyesight isn't particularly bad, just a minor astigmatism.

wtallis 6y ago

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

phpdave11 6y ago

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

smu3l 6y ago
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 6y ago
  That's clearly intentional to make the point. Made me appreciate the article more.
  - smu3l 6y ago
    Ah! It's only on that post, not the rest of the site. Clever.
progval 6y ago
the whole page too; it starts with: <body style="overflow: scroll;"> <div style="overflow: scroll;"> <div style="overflow: scroll;"> <div style="overflow: scroll;">

dusted 6y ago

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)

simonebrunozzi 6y ago

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.

TedDoesntTalk 6y ago

> 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.

hundchenkatze 6y ago
> I could not look at the html for it as it was minimized and not easily searchable. Give the Chrome dev tools a try. It "un-minifies" the html making it viewable and easily traversable. https://developers.google.com/web/tools/chrome-devtools/dom/ https://developers.google.com/web/tools/chrome-devtools/dom/
- Semaphor 6y ago
  And obviously Firefox does the same. https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML https://developer.mozilla.org/en-US/docs/Tools/Page_Inspecto...
IggleSniggle 6y ago
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.

m4tthumphrey 6y ago

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?

untog 6y ago
> I don't even understand why they would remove them? Who ever complained of a scroll bar? IMO it's all part of this push to combine mobile and desktop UI. On mobile there is a legitimate case to be made for removing them because screen real estate is so precious. But desktop gets clobbered as an unwanted side effect.
- bb123 6y ago
  I actually think it has more to do with the increasing size and sophistication of the touchpad in Macs. There is no need for a scroll bar when you have a touchpad you can flick (likewise for magic mice).
  - spideymans 6y ago
    Yea on macOS, the scroll bar is less of a scroll bar, and more of a scroll indicator. There just isn’t any reason to click on the scroll bar if you have a trackpad. Notably, when you connect a traditional mouse, the scroll bar automatically becomes thicker (easier to click) and always visible, as mice users do have a reason to click/drag the scroll bar. Seems like Apple had this in mind
    - formerly_proven 6y ago
      > Yea on macOS, the scroll bar is less of a scroll bar, and more of a scroll indicator. There just isn’t any reason to click on the scroll bar if you have a trackpad. I've seen so many web pages whose "fold line" just aligned so neatly with the end of my viewport that without the scrollbar being visible I would've just closed the page, being disappointed that it's just a meaningless hero page with no content. Similarly, if stuff like selection boxes align just right, you simply can't see there are more options without a scrollbar. It just looks like you only have those options that are on the screen right now. It's just plain bad UX coming from Apple.

dgellow 6y ago

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.

dusted 6y ago
yes, that's pretty terrible, I always scroll with the mouse wheel, since I'm tool old to be rubbing a plate of glass and not feel like a moron. But this one, made my finger hurt a bit and I din't even make it half way down.
- vsareto 6y ago
  Try arrow keys for scrolling
- Tagbert 6y ago
  You can also tap the space bar to scroll a screen at a time
  - sitkack 6y ago
    I believe this will be gone in a couple years. Lots of google properties are over-riding this.
  - mike22 6y ago
    This is broken with floating headers and footers. The scrolling goes over the whole viewport; after each pg dn-equivalent, you need to scroll back up two or three lines to see what was covered by the header/footer.
- missblit 6y ago
  I have a "Mitsumi Standard Scroll" mouse that has a scroll button that you can hold down instead of a wheel that you have to keep spinning. It's so much easier on the fingers that I'm amazed I haven't been able to find it anywhere else.

tomconnors 6y ago

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.

untog 6y ago

> 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!

hibbelig 6y ago
I guess what was meant was to check both settings, i.e. both the default Mac scrollbar behavior and the "Always" behavior. After all, the initial sentence also didn't imply checking _only_ some other platform.
matsemann 6y ago
Are your majority of users really using a macbook? Maybe if you're a hip SaaS startup.
- untog 6y ago
  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.

supernova87a 6y ago

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.

soco 6y ago
Especially with the usual screen ratios nowadays, their huge width goes unused 99% of the time anyway. So there's an only 1% incentive from usability side to remove the right vertical scrollbar... As a matter of fact, I actually use in my Firefox vertical tabs stacked left, to spare me some vertical space on the laptop screen.
- The_rationalist 6y ago
  It's not just about 1% of screenspace, it's about visual pollution that is distracting, it increase cognitive noise and cognitive noise is cancer
  - bobbyT314 6y ago
    Giving the user clear feedback about where they are in a page and how to modify their location should not "increase cognitive noise". It should in fact offload cognitive load from the user onto the interface leaving more room, so to speak, for the user to use for themselves.
- reaperducer 6y ago
  Especially with the usual screen ratios nowadays My computer is an 11-inch MacBook Air. That means that even if I run Safari full-screen, which is inconvenient, I have only 680 vertical pixels for content. It's amazing how many web sites I run into that throw up fixed-position pop-ups that are bigger than that, and I can't close them or scroll to see their content because the designers or middle managers decided that every person on the planet is rocking a 27-inch 5K display. Usually I just close the window and never visit the site again. If it's important, I break out the dev tools and start invoking display:none until I hit the right element.

umvi 6y ago

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 6y ago
Even worse, they tend just do it just on Mac and only in Chrome.

Aardwolf 6y ago

"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 6y ago
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 6y ago
  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.
- Aardwolf 6y ago
  scrollbar gives visual information and allows me to scroll to whereever I want at the speed I want, scrollwheel only goes at fixed speed I'm talking about desktop computers here by the way, althrough grabbing a scrollbar and going to wherever I want at any speed would be awesome on a phone too. I mean such programs as Konsole, Firefox, and others, in Linux desktop. Scrollbars got thinner and with super low contrast there too

crizzlenizzle 6y ago

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.

Santosh83 6y ago

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.

keyringlight 6y ago
Contrast is issue I've found to be annoying, as though UI designers don't really want you to spot it easily and to show the information it conveys. On the windows side I think it's after winxp that they moved away from having color to greys, and then later to solid blocks
Hizonner 6y ago
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.
userbinator 6y ago
...and thanks to some apps doing away with window borders completely, as well as everything becoming some drab grey colour, many times I've mistakenly clicked in and activated a different window while trying to manipulate a nearly-invisible "automatically expanding" scrollbar.

codingdave 6y ago

> 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 6y ago
I'm looking at you, all sites that only work on Chrome and break in subtle ways on Firefox or Safari.
- acheron 6y ago
  The true spirit of Internet Explorer lives on.
- wott 6y ago
  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".

pwinnski 6y ago

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!

btbuildem 6y ago

Guilty as charged

AnonHP 6y ago

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?!

jakub_g 6y ago

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.

ricardobeat 6y ago
All you need is a round of testing for cross-browser compatibility. It's a pretty much solved problem by now, doesn't take that much time and can be automated. There is nothing stopping every developer from doing it - besides the usual pressure to deliver features in place of proper engineering.
- dmitriid 6y ago
  > All you need is a round of testing for cross-browser compatibility. It's a pretty much solved problem by now, doesn't take that much time and can be automated. Please show me a solved automated test for the issue in the post.
  - IncRnd 6y ago
    There are several online cross-platform browser testing services. You don't even need a non-mac yourself. If the company is large enough to alwayus test locally, most modern testers will use VMs or some sort of containerization for repeatable determinism. This is absolutely a solved problem.
    - reaperducer 6y ago
      Online isn't real-life. You can test in a VM, but it will never be the same as testing on actual hardware. Even my craptastic company gives me a bunch of devices to test on. And I very deliberately specify very low-end versions of the machines so that I can test against worst-case-scenarios. It's a bonus that sub-optimal hardware is cheap as chips. My favorite testing device is a $20 burner phone I picked up in the supermarket checkout aisle. If the web site works on that piece of poo, it'll work on anything. Right now I'm waiting for UPS to deliver an old iPad from Alaska that the IT department bought for me off of fleaBay, just so that I can test on sub-optimal actual hardware.

apocalyptic0n3 6y ago

> 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"

spectramax 6y ago

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 6y ago
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.

fortran77 6y ago

> 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.

pcr910303 6y ago

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 6y ago
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 6y ago
  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.
jordache 6y ago
you totally missed the point. MacOS default UX w/ the hidden scrollbar represents a tiny portion of any consumer-facing web product's user base. So what is the value of a development team, not experiencing the same UX as the vast majority of their users?

VoxPelli 6y ago

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

chias 6y ago

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 6y ago
The other being System Preferences -> Keyboard -> Modifier Keys and map Caps Lock to Escape
- snazz 6y ago
  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 6y ago
    You can really have it remapped to anything, really. Mine is remapped to F18 via hidutil to serve as a "hyper" key.
  - spixy 6y ago
    you can easily remap keys with PowerToys... https://github.com/microsoft/PowerToys https://github.com/microsoft/PowerToys

zeveb 6y ago

> 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.

abraxas 6y ago

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

matthewheath 6y ago

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.

smhmd 6y ago

Even Google has this problem[0]. [0]: https://i.imgur.com/kusIhDh.png https://i.imgur.com/kusIhDh.png

marmshallow 6y ago

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-iphone-ipad-tutorial/ https://www.idownloadblog.com/2019/08/05/scroll-faster-iphon...

plorkyeran 6y ago
We used to call that "using the scroll bar".
- saagarjha 6y ago
  iOS devices were not nearly performant enough to allow that until recently ;)
  - olyjohn 6y ago
    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 6y ago
      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.
aendruk 6y ago
> you can grab the scroll bar to scroll at hyper speed I think it's called using a scrollbar. :) That's typically how they work. To spare readers the content marketing piece: tap and hold to grab it.
- snazz 6y ago

eddieh 6y ago

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.

initself 6y ago

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.

bstar77 6y ago

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 6y ago
That's a lot of work to make sure every user's experience on their platform is inconsistent.
- bstar77 6y ago
  Seems like you responded to the wrong comment.
  - pseudalopex 6y ago
    "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."

liminal 6y ago

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.

ZeWaren 6y ago

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.

mattacular 6y ago

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.

newyorker2 6y ago

What is the reason for this developer monoculture?

nprz 6y ago

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 6y ago
`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.

anurag 6y ago

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

Pxtl 6y ago

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

deleted 6y ago

[deleted]

markus_zhang 6y ago

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.

chrismorgan 6y ago

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.

abinaya_rl 6y ago

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.

abruzzi 6y ago

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.

chrismorgan 6y ago

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 6y ago
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.

edgarvaldes 6y ago

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

JMTQp8lwXL 6y ago

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

awiesenhofer 6y ago

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 6y ago

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

wyuenho 6y ago

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.

OOPMan 6y ago

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!

KayL 6y ago

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.

MH15 6y ago

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.

donatj 6y ago

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.

ggm 6y ago

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 ....

l0b0 6y ago

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 6y ago
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.

CarbyAu 6y ago

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-streams-the-good-and-the-bad/ https://blog.foldersecurityviewer.com/ntfs-alternate-data-st...

brundolf 6y ago

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.

dghughes 6y ago

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

trilinearnz 6y ago

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.

Aldo_MX 6y ago

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...

jhanschoo 6y ago

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.

dlevine 6y ago

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.

erwinh 6y ago

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

axilmar 6y ago

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.

tonetheman 6y ago

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.

qwertox 6y ago

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.