Recent versions of Firefox no longer show the scrollbar. Or rather, they show it too fine and only when scrolling. From my point of view, this is an accessibility problem.
This is the solution I found to restore the scrollbar by changing some values in about:config:
layout.testing.overlay-scrollbars.always-visible -> true
widget.gtk.overlay-scrollbars.enabled -> false
widget.non-native-theme.scrollbar.size.override -> 20
widget.non-native-theme.scrollbar.style -> 3
widget.non-native-theme.win.scrollbar.use-system-size -> false
widget.non-native-theme.always-high-contrast -> true
After closing and reopening Firefox, I verified that the scrollbar reappeared in Firefox 133 on macOS and Linux. This solution should also work on Windows.
Of course, you can customize these values. This is a brief explanation:
layout.testing.overlay-scrollbars.always-visible -> true
This setting ensures that scrollbars are always visible, even when content is not actively being scrolled. It overrides the behavior where scrollbars only appear while scrolling.
widget.gtk.overlay-scrollbars.enabled -> false
On systems using GTK (commonly Linux distributions), this disables the use of overlay scrollbars, which are typically thinner and less obtrusive. By disabling this, Firefox will use the more traditional, always-visible scrollbars.
widget.non-native-theme.scrollbar.size.override -> 20
This value sets the width of the scrollbar in pixels, overriding the default size. I chose a value of 20 to make the scrollbar more prominent, improving visibility and usability. The right value for you will depend on your screen resolution.
widget.non-native-theme.scrollbar.style -> 3
This setting changes the appearance of the scrollbar. A value of 3 corresponds to a style that provides a more traditional and accessible design. This setting accepts integers from 0 to 5, with each number representing a different scrollbar style:
0: Default style. The appearance and behavior of the scrollbar depend on the non-native theme being used.
1: Minimalist style. The scrollbars are thinner and less intrusive.
2: Simple style. A basic scrollbar without advanced visual effects.
3: Traditional style. The scrollbar appears thicker with a classic look, similar to older implementations.
4: Transparent style. The scrollbar might only be partially visible or appear when the mouse hovers over it.
5: Advanced custom style. A rendering designed for enhanced visual appearance or integration with specific themes.
You can experiment with these values to determine which works best for your preferences.
widget.non-native-theme.win.scrollbar.use-system-size -> false
By default, Firefox on Windows uses the system-defined scrollbar size. Setting this to false allows the browser to apply the custom size specified in widget.non-native-theme.scrollbar.size.override.
widget.non-native-theme.always-high-contrast -> true
This forces the scrollbars to use a high-contrast theme, making them more visible against a variety of backgrounds. This is particularly useful for users with visual impairments or those who prefer a clearer visual separation between content and UI elements.
By tweaking these values, you can fully customize the appearance and behavior of scrollbars in Firefox to meet your accessibility and usability needs.
Happy hacking,
December 13, 2024