1707470 - GTK scrollbar width cannot be overridden by gtk.css since Firefox 89 with Proton

Status: RESOLVED FIXED

(Core :: Widget: Gtk, defect)

Description

[Felix Crux]

Attachment: Comparison of other GTK scrollbars (thick) vs. Firefox (too thin to see/click)

After updating to Firefox 89 with the new Proton design, the scrollbar width is not respecting the theme override set in .config/gtk-3.0/gtk.css.

When I started using a higher DPI 4K resolution display with text scaled up for legibility (via .Xresources Xft.dpi: 170) I found that the default scrollbar width in the default GTK theme was impossibly narrow. To fix this, I added an override for the width property in .config/gtk-3.0/gtk.css that has been working well for several months now in all apps, including Firefox. However, with the latest Firefox update, Firefox's scrollbars have reverted to being unclickably thin. All other applications are unaffected and continue to respect the override setting.

This is an issue not just for aesthetics, but also because the default scrollbar width at this resolution is too small for me to see and interact with.

My ~/.config/gtk-3.0/gtk.css file usually contains the following snippet to address this problem:

/* Make scrollbars "fatter" so they're easier to click. */
.scrollbar.vertical slider, scrollbar.vertical slider {
  min-width: 0.6rem;
}

Additionally, while debugging, I temporarily added a rule background-color: red; to confirm that the file is in use, even by Firefox. You can see in the attached screenshots that the scrollbars are red, including Firefox's.

I am running Firefox 89.0b3 on Debian Buster (Stable) Linux with libgtk-3-0 3.24.5-1 using the Adwaita (dark) theme.

In the attached screenshot you can see two other GTK apps in the foreground (nautilus and evince), and Firefox in the background.

I believe some work related to "overlay scrollbars" was done for this release — perhaps that's related?

Comment 1

[Felix Crux]

Apologies for the gigantic screenshot — I didn't realize it would show up that large and take up all that space. I don't see a way to edit the report and replace it with a scaled-down version, though. Sorry.

Comment 2

[Felix Crux]

I don't have overlay scrollbars enabled. Taking a wild guess, might this be related to https://hg.mozilla.org/mozilla-central/rev/03002ff83a09#l3.116 ?

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Not really. This is related to the non-native theme. We read some of the CSS from gtk to produce native-looking scrollbars, but we draw our own because we don't want to use gtk in child processes. It seems don't read min-width, but this should be fixable, I think. Meanwhile you can tweak the width from about:config changing widget.non-native-theme.scrollbar.size.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Actually, I think there's a variety of ways people could achieve this effect and such, and I think we're probably better off just having the about:config tweak, because getting it right if you set it on the scrollbar itself vs. on the slider, or the thumb, or what not, is just going to be a pain.

Comment 5

[Felix Crux]

Thanks for the pointer! With widget.non-native-theme.scrollbar.size I was indeed able to set the width to something visible/clickable.

I also tried out a hg bisect, which found that this commit is the one that specifically introduced the change: https://hg.mozilla.org/mozilla-central/rev/71f00533fc8e31e327e58380b4b9217220b70aa7

It sounds like the GTK config was a bit of a red herring — the DPI adjustment may have been the more important factor? In any case, it sounds like the change is intentional, but I'm not sure if it was expected to have such a drastic effect on high-DPI displays? In my case I'm on a 4K monitor, but all the text and UI is scaled up 2x (except, now, the Firefox scrollbar), so it's an "effective" resolution of 1080p, but everything is a lot sharper and less pixelated.

I agree the narrower scrollbar matches the native GTK behaviour, which is why I had to override the theme defaults :) IMHO having this one UI element not scale with everything else isn't ideal, though, and leads to real visibility problems under high-DPI configurations.

Thanks again!

Comment 6

[iii_iii]

The behaviour is inconsistent because the profile manager scroll bar width is overridden by ~/.config/gtk-3.0/gtk.css

Comment 7

[Emilio Cobos Álvarez (:emilio)]

It shouldn't after bug 1710324 (which I think landed for 90)

Comment 8

[AlexDeLorenzo.dev]

Can confirm. I use this as an accessibility feature.

Comment 9

[:gerard-majax]

Fixed per comment 7 and 8