Use Scrollbars with larger width in Firefox 89+
Categories
(Core :: Layout: Scrolling and Overflow, enhancement)
Tracking
()
People
(Reporter: allo, Unassigned)
Details
With the new UI in Firefox 89, the native scrollbars are replaced by very narrow ones drawn by Firefox itself. They are both to narrow and are missing the scrollbar buttons.
The Mozilla docs themself (https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width) tell about accessibility
WCAG criterion 2.1.1 (Keyboard) has been in place for a long time to advise on basic keyboard accessibility, and this should include scrolling of content areas. And introduced in WCAG 2.1, criterion 2.5.5 (Target Size) advises that touch targets should be at least 44px in width and height (although the problem is compounded on high-resolution screens; thorough testing is advised).
Currently there still is a switch to disable non-native UI, but in the past Mozilla often removed such switches that allowed to restore legacy behavior. So please either ensure that the switch keeps available (and maybe expose it in the settings UI) or improve the non-native scrollbars to have feature parity and the same accessibility as native ones.
|
||
Updated•4 years ago
|
|
||
Comment 1•4 years ago
|
||
Assuming this is on Linux?
You can pretty much change them however you want (widget.non-native-theme.scrollbar.size changes the width, widget.non-native-theme.gtk.scrollbar.allow-buttons respects the OS setting for scrollbar buttons, there are other similar switches for other bits of the scrollbar styles and such).
The scrollbars we draw are effectively the Adwaita scrollbars (which are the standard GTK scrollbars).
The tuning options work. The non-native-theme.enabled switch worked and gave me the Gtk-Theme scrollbars, but now it doesn't anymore for some reason.
It often but now always shows a scroll bar that is slightly different from the non-native theme again, but completely different from the Gtk-scrollbars like in the save-file dialog (which is probably the best test which theme is currently applied on Firefox). I am not sure why the behavior is inconsistent.
- about:config has with the switch disabled correct native scroll bars like in the save file dialog
- Most websites have a scroll bar that shows buttons and has a rounded handle bar and is a bit wider
I wonder why the default size is chosen so small (12 px in about:config by default). I guess one can debate about the buttons ("modern" trend seems to be to just have a bar), but in the end I preferred to have native scroll bars.
Enforcing unstyled scrollbars in websites with a user style doesn't seem to work anymore (at least with the non-native-theme) either:
*{
scrollbar-color: auto !important;
scrollbar-width: auto auto !important;
}
Do the new scroll bars depend on the used theme as well?
|
|
||
Comment 3•4 years ago
|
||
(In reply to alex from comment #2)
The tuning options work. The non-native-theme.enabled switch worked and gave me the Gtk-Theme scrollbars, but now it doesn't anymore for some reason.
It should, it works here (on Nightly at least?).
It often but now always shows a scroll bar that is slightly different from the non-native theme again, but completely different from the Gtk-scrollbars like in the save-file dialog (which is probably the best test which theme is currently applied on Firefox). I am not sure why the behavior is inconsistent.
Yeah, that's odd. Just to avoid this inconsistency (since the native theme is used in the Firefox UI) I made the native theme draw non-native scrollbars, but it is conditional on it being enabled: https://searchfox.org/mozilla-central/rev/77f0b36028b2368e342c982ea47609040b399d89/widget/gtk/nsNativeThemeGTK.cpp#1424-1426
That was bug 1710324. I can't seem to reproduce what you're describing. The save-file dialog may use overlay scrollbars depending on your theme / gtk version, which we historically haven't used, so they're likely thinner.
- about:config has with the switch disabled correct native scroll bars like in the save file dialog
- Most websites have a scroll bar that shows buttons and has a rounded handle bar and is a bit wider
I wonder why the default size is chosen so small (12 px in about:config by default). I guess one can debate about the buttons ("modern" trend seems to be to just have a bar), but in the end I preferred to have native scroll bars.
12px is what you get with the default Adwaita theme on a stock Gnome installation, thus the default.
Enforcing unstyled scrollbars in websites with a user style doesn't seem to work anymore (at least with the non-native-theme) either:
How not? You typoed and it should be scrollbar-width: auto (not auto auto) but other than that it should work, afaict.
It should, it works here (on Nightly at least?).
I need to test it further, because I don't get always the same behaviour. After changing it and reloading one tab I got clearlooks-phenix scrollbars. Now I get something that may look like adwaita.
The save-file dialog may use overlay scrollbars depending on your theme
The save dialog follows the system theme, which has no overlay scrollbars here. I only mentioned it, because I can compare the Firefox scroll bars with the Gtk-dialog scrollbars.
This may be relevant, because which programs use which theme may depend on things like gnome-settings-daemon running to have the right theme. By checking that the save dialog of Firefox has the correct theme, I know what scrollbars to expect in the content area, so I am sure the problem is Firefox and not the theme.
12px is what you get with the default Adwaita theme on a stock Gnome installation, thus the default.
Okay. I always change it to something like clearlooks, because I think they are too narrow in other Gtk/Gnome programs as well. That's why I hope to be able to get Firefox to use my more classic scrollbars, too.
How not? You typoed and it should be scrollbar-width: auto (not auto auto) but other than that it should work, afaict.
I am not sure, I wrote this many releases ago and it forced some websites not to style the scrollbars. But for testing this issue I do not use this style anyway.
Description
•