Scroll bar mostly invisible on Chrome on macOS #1236

mzuliani-ibm · 2022-03-29T16:45:28Z

Scroll bar mostly invisible on Chrome on macOS

Detailed description

Initially thought there were no scroll bars, but turns out on Chrome it is a very light scroll bar handle on a very light track. Breaks contrast guidelines.
Handle (250,250,250) #FAFAFA on (244,244,244) #F4F4F4 = 1.05:1 contrast ratio

What did you expect to happen? What happened instead? What would you like to see changed?

As I scroll down a long page, I expect the dynamic scroll bar to appear and to be visible against the main content background.

What browser are you working in?

Worst in Chrome Version 99.0.4844.84 on macOS 12.3
Scroll bar handle has an thin outline in Firefox 98.0.2 and Safari (still not great)

Steps to reproduce the issue

Go to a Carbon Gatsby-based page https://gatsby-theme-carbon.vercel.app/contributions or https://carbondesignsystem.com/components/dropdown/usage
Scroll down the page
Try and find the scroll bar's handle
Almost impossible to see
(see screen shots at the bottom)

Note that the default works just fine on site home pages (mostly dark or black backgrounds), but not on most content pages (mostly light or almost white backgrounds).

Additional information

Default scroll bar colors are apparently set based on the background color of the <body> (Using inspector to temporarily change the background color to something much lighter, like white, seems to fix the problem and doesn't seem to affect actual colors of the header or main content.)
There are all sorts of complicated desktop OS settings (macOS + Windows) that make for a wide range of variations of default visibility
More advanced styling is possible, but the body background color may be the quickest or most simple fix (depending on what other side effects it may have)