Short version: Firefox displays an intriguing behavior where it automatically styles the scrollbar in lime green but not light green. The question arises, why does it render one color but not the other?
While responding to another query, I discovered that the following code creates a lime green colored scrollbar in Firefox 72 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>As seen here:
https://i.sstatic.net/mAJip.png
However, Firefox does not render a light green colored scrollbar with this code:
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>Illustrated here:
https://i.sstatic.net/Ala65.png
What causes this behavior, and how can it be predicted?
PS. Chrome 80 displays both scrollbars in the default style.
PS. While there are queries on how to actively change scrollbar color in Firefox, my current interest lies in understanding when and why it happens automatically, specifically for certain background colors.