3

TLDR; I've encountered interesting behaviour in Firefox. For example, it automatically styles the scrollbar limegreen, but not lightgreen. Why does it render one, but not the other?

While answering another question I found that this renders a limegreen colored scroll bar in Firefox 72 latest on Windows 10:

div {
  background-color: limegreen;
  max-height: 5em;
  overflow-y: scroll;
}
<div>Hi!<br>Hi!<br>Hi!<br>Hi!<br>Hi!<br>Hi!<br>Hi!<br>Hi!<br>Hi!<br>Hi!<br></div>

Like this:

green vertical scrollbar

But that Firefox refuses to render a lightgreen colored scroll bar:

div {
  background-color: lightgreen;
  max-height: 5em;
  overflow-y: scroll;
}
<div>Hi!<br>Hi!<br>Hi!<br>Hi!<br>Hi!<br>Hi!<br>Hi!<br>Hi!<br>Hi!<br>Hi!<br></div>

See this:

plain gray scrollbar

What causes this behavior, and how can I predict it?

PS. Chrome 80 shows both scrollbars in the default style.

PS. There are questions on how to actively change scrollbar color in Firefox, but I'm not (right now) interested in pragmatic advice on "how to change scrollbar color", but instead I'm asking and trying to understand when and why it happens automatically, and only for some background colors.

Jeroen
  • 60,696
  • 40
  • 206
  • 339
  • 1
    I've made an edit to your post, hoping to capture those who read a but too quick :) – Martijn Feb 19 '20 at 09:47
  • 1
    Hah thx! That helps a lot. We posted edits at the same time - I've merged the two manually, and also slightly tweaked the TLDR. – Jeroen Feb 19 '20 at 09:49
  • I would say it's a matter of contrast. try to play with the color picker and you will notice how the color is changing – Temani Afif Feb 19 '20 at 12:03

1 Answers1

0

div {
  background-color: lightgreen;
  max-height: 5em;
  overflow-y: scroll;
  scrollbar-color: lightgreen lightgreen;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Using scrollbar-color works (more info here). I think color detection is just really buggy - sometimes one color works with scrollbar-color and applies to both parts of the scrollbar and sometimes you need to repeat it twice. I just think it's a poorly implemented part of the HTML spec. Doesn't have great browser support though so make sure it's not required as part of your interface.

CookieJarApps
  • 325
  • 2
  • 10
  • Thx for the response! It doesn't quite answer my question of _why_ and _when_ it happens though. My question is not of the pragmatic "_how can I change the scrollbar color?_" kind, but more a matter of curiosity about why/how/when this behavior happens. – Jeroen Feb 19 '20 at 09:45
  • I added some info on why I think it happens into the bottom with an edit - even with the scrollbar-color tag there are weird color problems, probably due to browser incompatibilites. Maybe it's to do with light or dark colors? White is hard to see on lightgreen, but both dark and light text can be seen on limegreen. – CookieJarApps Feb 19 '20 at 09:47