Join the Mozilla’s Test Days event from Dec 2–8 to test the new Firefox address bar on Firefox Beta 134 and get a chance to win Mozilla swag vouchers! 🎁

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Firefox breaks my desktop environment's scrollbar style and (gradient) color and in version 98+ refuses css to approximate it

  • 13 ŋuɖoɖowo
  • 1 masɔmasɔ sia le esi
  • 1 view
  • Nuɖoɖo mlɔetɔ kavadias

more options

I work on kubuntu 20.04 with plasma 5.18.8 desktop environment. I have a QtCurve-based custom application style, which I almost match with css for GTK apps. Firefox has to be an exception by itself! Not only that, but it changes my ability to customize its interface, from time to time and even changes access to such ability, on some updates.

My scrollbar customizations in userChrome.css and userContent.css do not work any more (other CSS changes still work, for menu/addressbar/tabbar/bookmarksbar orderint and tab styling). I had to resort to settings in user.js file, to get a 20px width scrollbar, suitable for my big screen, but... it gets very wide when I increase the focus, on some webpages and becomes very ugly! Furthermore, I cannot make sense of the proper use of "ui.themedScrollbar*" settings and the scrollbar and its slider result in the same color. These are my settings in user.js:

user_pref("widget.content.gtk-theme-override", "backwater"); user_pref("widget.non-native-theme.enabled", false); // Use GTK-3.0 gtk.css: set to false user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true); // Use userChrome.css & userContent.css: set to true user_pref("widget.gtk.alt-theme.scrollbar_active", true); user_pref("widget.non-native-theme.scrollbar.size.override", 20); // If nothing else works, fix scrollbar width to 20px user_pref("widget.non-native-theme.gtk.scrollbar.round-thumb", false); user_pref("widget.non-native-theme.gtk.scrollbar.thumb-size", 1.0); // originally 0.75 user_pref("widget.non-native-theme.gtk.scrollbar.allow-buttons", true); // it was true, anyway... user_pref("layout.css.cached-scrollbar-styles.enabled", false); user_pref("layout.css.color-mix.enabled", true); user_pref("widget.non-native-theme.scrollbar.style", 4); // wide scrollbar theme: set to 4 user_pref("ui.themedScrollbar", "#bad1f5"); user_pref("ui.themedScrollbarInactive", "#668cc4"); user_pref("ui.themedScrollbarThumb", "#e4e4e4"); user_pref("ui.themedScrollbarThumbHover", "#e4e4e4"); user_pref("ui.themedScrollbarThumbActive", "#668cc4"); user_pref("ui.themedScrollbarThumbInactive", "#bad1f5"); user_pref("browser.dom.window.dump.enabled", false); user_pref("extensions.ui.sitepermission.hidden", false); user_pref("fission.experiment.max-origins.qualified", true);

Either with the "ui.themedScrollbar*" settings or without them (and cleared from the prefs.js file), the scrollbar and its slider result in the same color, unless I (tryingly) click on some place on the scrollbar outside its slider; then I can see the slider, _only_ for the duration of the mouse-down event (which causes up or down page-hight scrolling).

The default, very thin scrollbar, as well as my modified wide scrollbar with invisible slider are both useless to me! I have even tried fx-autoconfig (https://github.com/MrOtherGuy/fx-autoconfig) to make the scrollbar CSS work, but no result. At this point, I am considering switching to another browser, despite the trust I have to mozilla, for my data and privacy.

I work on kubuntu 20.04 with plasma 5.18.8 desktop environment. I have a QtCurve-based custom application style, which I almost match with css for GTK apps. Firefox has to be an exception by itself! Not only that, but it changes my ability to customize its interface, from time to time and even changes access to such ability, on some updates. My scrollbar customizations in userChrome.css and userContent.css do not work any more (other CSS changes still work, for menu/addressbar/tabbar/bookmarksbar orderint and tab styling). I had to resort to settings in user.js file, to get a 20px width scrollbar, suitable for my big screen, but... it gets very wide when I increase the focus, on some webpages and becomes very ugly! Furthermore, I cannot make sense of the proper use of "ui.themedScrollbar*" settings and the scrollbar and its slider result in the same color. These are my settings in user.js: user_pref("widget.content.gtk-theme-override", "backwater"); user_pref("widget.non-native-theme.enabled", false); // Use GTK-3.0 gtk.css: set to false user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true); // Use userChrome.css & userContent.css: set to true user_pref("widget.gtk.alt-theme.scrollbar_active", true); user_pref("widget.non-native-theme.scrollbar.size.override", 20); // If nothing else works, fix scrollbar width to 20px user_pref("widget.non-native-theme.gtk.scrollbar.round-thumb", false); user_pref("widget.non-native-theme.gtk.scrollbar.thumb-size", 1.0); // originally 0.75 user_pref("widget.non-native-theme.gtk.scrollbar.allow-buttons", true); // it was true, anyway... user_pref("layout.css.cached-scrollbar-styles.enabled", false); user_pref("layout.css.color-mix.enabled", true); user_pref("widget.non-native-theme.scrollbar.style", 4); // wide scrollbar theme: set to 4 user_pref("ui.themedScrollbar", "#bad1f5"); user_pref("ui.themedScrollbarInactive", "#668cc4"); user_pref("ui.themedScrollbarThumb", "#e4e4e4"); user_pref("ui.themedScrollbarThumbHover", "#e4e4e4"); user_pref("ui.themedScrollbarThumbActive", "#668cc4"); user_pref("ui.themedScrollbarThumbInactive", "#bad1f5"); user_pref("browser.dom.window.dump.enabled", false); user_pref("extensions.ui.sitepermission.hidden", false); user_pref("fission.experiment.max-origins.qualified", true); Either with the "ui.themedScrollbar*" settings or without them (and cleared from the prefs.js file), the scrollbar and its slider result in the same color, unless I (tryingly) click on some place on the scrollbar outside its slider; then I can see the slider, _only_ for the duration of the mouse-down event (which causes up or down page-hight scrolling). The default, very thin scrollbar, as well as my modified wide scrollbar with invisible slider are both useless to me! I have even tried fx-autoconfig (https://github.com/MrOtherGuy/fx-autoconfig) to make the scrollbar CSS work, but no result. At this point, I am considering switching to another browser, despite the trust I have to mozilla, for my data and privacy.

Ŋuɖoɖo si wotia

Hello all,

I have, finally, found what was wrong with my setup. All the scrollbar problems where caused by fx-autoconfig (https://github.com/MrOtherGuy/fx-autoconfig), which I had not deactivated --and did not make my scrollbar CSS work. Once I removed it, the scrollbar no more increases in size when I increase the focus. Further, for the scrollbar colors, I have managed to get a fairly acceptable simulation of my desktop settings, by using the following settings in user.js:

user_pref("ui.themedScrollbar", "#e4e4e4"); user_pref("ui.themedScrollbarInactive", "#e4e4e4"); user_pref("ui.themedScrollbarThumb", "#bad1f5"); user_pref("ui.themedScrollbarThumbHover", "#b1c8e9"); user_pref("ui.themedScrollbarThumbActive", "#668cc4"); user_pref("ui.themedScrollbarThumbInactive", "#bad1f5");

These did not work when I had the fx-autoconfig installed.

So, every aspect of my problems has been fixed! Thank you all for attempting to help!

Xle ŋuɖoɖo sia le goya me 👍 0

All Replies (13)

more options

Hello! The following browser extension might be useful for you: https://addons.mozilla.org/en-US/firefox/addon/custom-scrollbars/

Also, can you check if toolkit.legacyUserProfileCustomizations.stylesheets is set to true in about:config? Thanks!

more options

elison, thank you for for the quick reply.

As you can see in the included code from my user.js there is the command: user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true); So, yes, toolkit.legacyUserProfileCustomizations.stylesheets is set to true (I have verified this in the about:config page).

As for the add-on you suggest, the improvement is minimal, regarding my problems. Instead of a grey scrollbar that I can only see its slider when hovering over a scrollbar part not covered by the slider --and then it's only slightly visible-- I can now have a similar scrollbar of any color, with the same invisible slider and only slightly visible after I search for it! This is no solution for me.

Thank you for trying, though.

more options
more options

cor-el thank you for the reply,

I am not sure what switching widget.gtk.overlay-scrollbars.enabled from false to true is supposed to do for me. What I see is that the scrollbar is now like... auto-hiding. Otherwise, I still cannot locate the slider. The auto-hiding prevents me from seeing the ugly very-wide scrollbar, when I increase the focus on a page; just that. But, when it appears (i.e., when I try to use it), it is still wide and ugly, on pages I have increased the focus.

Thank you anyway.

more options

I am also using KDE Plasma. There is a preference for scrollbar width. My css for width stopped working with version 89. widget.non-native-theme.scrollbar.size.override

This code in userContent.css still works for colours.

  :root {
  scrollbar-color: #6495ED #D9D9D9 !important;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color

more options

Hello Terry and thank you for the reply.

I am, currently, on FF version 99. Before version 98 everything in my CSS code worked fine. I am using widget.non-native-theme.scrollbar.size.override to get the wide scrollbar. Both my userChrome.css and userContent.css start with:

.scroller, :root, html, body, * {

 font-size: 15pt;
 scrollbar-width: 19px;
 scrollbar-color: #bad1f5 #e4e4e4;   /* thumb-color track-color */

}

So, I am using your second suggestion as well, but the result does not obey my CSS and has very similar or the same colors for the scrollbar trough and slider (unless the mouse hovers over the trough but not over the slider). I am unsure why this does not work for me. If you are in versions 98/99 as well, could you check in about:config page the values of the following settings and get back to me? Thank you in advance!

widget.content.gtk-theme-override", "backwater"); widget.non-native-theme.enabled", false); // Use GTK-3.0 gtk.css: set to false toolkit.legacyUserProfileCustomizations.stylesheets widget.gtk.alt-theme.scrollbar_active widget.non-native-theme.scrollbar.size.override ---> I have this set to 20 widget.non-native-theme.gtk.scrollbar.round-thumb widget.non-native-theme.gtk.scrollbar.thumb-size widget.non-native-theme.gtk.scrollbar.allow-buttons layout.css.cached-scrollbar-styles.enabled layout.css.color-mix.enabled widget.non-native-theme.scrollbar.style ui.themedScrollbar ui.themedScrollbarInactive ui.themedScrollbarThumb ui.themedScrollbarThumbHover ui.themedScrollbarThumbActive ui.themedScrollbarThumbInactive browser.dom.window.dump.enabled extensions.ui.sitepermission.hidden fission.experiment.max-origins.qualified

kavadias trɔe

more options

Hello Terry and thank you for the reply.

I am currently on FF version 99. Before version 98, everything worked fine with my CSS code. I am using widget.non-native-theme.scrollbar.size.override to get the wide scrollbar. Also, both my userChrome.css and userContent.css start with the code:

.scroller, :root, html, body, * {

 font-size: 15pt;
 scrollbar-width: 19px;
 scrollbar-color: #bad1f5 #e4e4e4;  /* thumb-color track-color */

}

So, I am using your second suggestion as well.

If you are on version 98/99, like I am, I would be interested in the values you have (if any) for the following settings, in the about:config page:

widget.content.gtk-theme-override widget.non-native-theme.enabled toolkit.legacyUserProfileCustomizations.stylesheets user_pref("widget.gtk.alt-theme.scrollbar_active widget.non-native-theme.scrollbar.size.override ---> I have this set to 20px widget.non-native-theme.gtk.scrollbar.round-thumb widget.non-native-theme.gtk.scrollbar.thumb-size widget.non-native-theme.gtk.scrollbar.allow-buttons layout.css.cached-scrollbar-styles.enabled layout.css.color-mix.enabled widget.non-native-theme.scrollbar.style browser.dom.window.dump.enabled extensions.ui.sitepermission.hidden fission.experiment.max-origins.qualified

Thank you in advance!

kavadias trɔe

more options

Hello Terry and thank you for the reply.

I am currently on FF version 99. Before version 98, everything worked fine with my CSS code. I am using widget.non-native-theme.scrollbar.size.override to get the wide scrollbar. Also, both my userChrome.css and userContent.css start with the code:

.scroller, :root, html, body, * {

 font-size: 15pt;
 scrollbar-width: 19px;
 scrollbar-color: #bad1f5 #e4e4e4;  /* thumb-color track-color */

}

So, I am using your second suggestion as well, but it does not work!

If you are on version 98/99, like I am, I would be interested in the values you have (if any) for the following settings, in the about:config page:

widget.content.gtk-theme-override widget.non-native-theme.enabled toolkit.legacyUserProfileCustomizations.stylesheets user_pref("widget.gtk.alt-theme.scrollbar_active widget.non-native-theme.scrollbar.size.override ---> I have this set to 20px widget.non-native-theme.gtk.scrollbar.round-thumb widget.non-native-theme.gtk.scrollbar.thumb-size widget.non-native-theme.gtk.scrollbar.allow-buttons layout.css.cached-scrollbar-styles.enabled layout.css.color-mix.enabled widget.non-native-theme.scrollbar.style browser.dom.window.dump.enabled extensions.ui.sitepermission.hidden fission.experiment.max-origins.qualified

Thank you in advance!

kavadias trɔe

more options

Hello Terry and thank you for the reply.

I am currently on FF version 99. Before version 98, everything worked fine with my CSS code. I am using widget.non-native-theme.scrollbar.size.override to get the wide scrollbar. Also, both my userChrome.css and userContent.css start with the code:

.scroller, :root, html, body, * {

 font-size: 15pt;
 scrollbar-width: 19px;
 scrollbar-color: #bad1f5 #e4e4e4;  /* thumb-color track-color */

}

So, I am using your second suggestion as well, but it does not work!

If you are on version 98/99, like I am, I would be interested in the values you have (if any) for the following settings, in the about:config page:

widget.content.gtk-theme-override widget.non-native-theme.enabled toolkit.legacyUserProfileCustomizations.stylesheets user_pref("widget.gtk.alt-theme.scrollbar_active widget.non-native-theme.scrollbar.size.override ---> I have this set to 20px widget.non-native-theme.gtk.scrollbar.round-thumb widget.non-native-theme.gtk.scrollbar.thumb-size widget.non-native-theme.gtk.scrollbar.allow-buttons layout.css.cached-scrollbar-styles.enabled layout.css.color-mix.enabled widget.non-native-theme.scrollbar.style browser.dom.window.dump.enabled extensions.ui.sitepermission.hidden fission.experiment.max-origins.qualified

Thank you in advance!

more options

Your code isn't exactly the same since I am using :root only. I also have it only in userContent.css, at the top of the file except for a namespace line (html).

These are the values in about:config. no value, true, true, true, 20, false, 0.9, true, true, false, 0, false, true, true

more options

Hello Terry and thank you for the values of your about:config settings. I have tried them, but there is, almost, no change --non for the scrollbar/slider colors problem I am having.

About the CSS code, other than the "!important" which you have and I added (just in case), the other differences would only be a problem if there is a corner case bug in FF CSS interpretation, which is quite unlikely. Otherwise, setting the same attribute for more than one keyword, plus a styling class and the root document, should make no difference. Nevertheless, I have tried it your wayand it has no result.

The fact that I have the same code in the userChrome.css file is irrelevant, I believe. The original place the scrollbar CSS code was working for me was the userChrome.css file and not the userContent.css. The scrollbar was an independent feature of the browser window before, whereas now it is only a feature of each webpage (which is _wrong_, in my opinion, because that is what causes the scrollbar to get wider when I increase the focus of a page, which is unquestionably the wrong behavior for the window's scrollbar. : unquestionably, because this makes the browser the _odd_ desktop window that does not have a scrollbar, but only content with scrollbars !).

In any case, thank you for trying to help!

kavadias trɔe

more options

BTW Terry,

I am now trying a fresh profile, to see what is going wrong. The first thing I tried was to only use your CSS, only in userContent.css and nothing else. The new profile does not have the problem of an invisible scrollbar slider, but does not obey the userContent.css colors: it sticks to somewhat contrasting shades of grey.

In addition, the fresh profile does not have the problem of increasing the scrollbar width width when I increase the page focus...

more options

Ɖɔɖɔɖo si wotia

Hello all,

I have, finally, found what was wrong with my setup. All the scrollbar problems where caused by fx-autoconfig (https://github.com/MrOtherGuy/fx-autoconfig), which I had not deactivated --and did not make my scrollbar CSS work. Once I removed it, the scrollbar no more increases in size when I increase the focus. Further, for the scrollbar colors, I have managed to get a fairly acceptable simulation of my desktop settings, by using the following settings in user.js:

user_pref("ui.themedScrollbar", "#e4e4e4"); user_pref("ui.themedScrollbarInactive", "#e4e4e4"); user_pref("ui.themedScrollbarThumb", "#bad1f5"); user_pref("ui.themedScrollbarThumbHover", "#b1c8e9"); user_pref("ui.themedScrollbarThumbActive", "#668cc4"); user_pref("ui.themedScrollbarThumbInactive", "#bad1f5");

These did not work when I had the fx-autoconfig installed.

So, every aspect of my problems has been fixed! Thank you all for attempting to help!