Styling scroll bar on Firefox. How to get rid of black border/outline on scroll bar?

user_10128619 0
Viewed 1127

This is the CSS I'm using to style a vertical scroll bar.

overflow-y: scroll;
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    background: #COLOR_1;
    border-radius: 2px;
  }
  ::-webkit-scrollbar-thumb {
    background: #COLOR_2;
    border-radius: 2px;
  }
    ::-webkit-scrollbar-thumb:hover {
    background: #COLOR_2;
  }
  scrollbar-color: ${props => "#COLOR_2" + " " + "#COLOR_1"};
  scrollbar-width: thin;

This is the result I expect (works on Chrome):

enter image description here

This is what I'm getting on Firefox:

enter image description here

enter image description here

enter image description here

How to get rid of the black line?

It comes from the top and goes all the way to the bottom.

firefox scrollbar css html
1 Answers

I experienced the same thing and inspired by your comment, I did some more digging.

This appears to be a bug within Firefox. Screenshots are attached to that bug showing a similar black outline around the scrollbar as you experienced when setting scrollbar-color. It appears like it's an issue on Windows Firefox only.

A fix was pushed and appears to be slated to be released in Firefox 85.

There was a comment containing a workaround: "If you set widget.disable-native-theme-for-content=true in about:config and refresh" that the OP said fixed it, but if your app is public-facing will not be much help. I tried this workaround for my site and it did not work perfectly, it removed the black outline but added a few colored pixels at the top and bottom of the scrollbar (I believe it's related to up/down buttons which are hidden by scrollbar-width: thin)

Another workaround is to not set scrollbar-color and the black outline should go away, although that is not the ideal solution when Chrome works correctly when changing scrollbar color to match the theme of your site.

user_14950500
Related