什么决定了 Firefox 中滚动条是否有颜色？

Question

TLDR;我在 Firefox 中遇到了一些有趣的行为。例如，它自动将滚动条设置为石灰绿色，但不是浅色绿色。 为什么它会渲染一个，而不是另一个？

---

在回答另一个问题时，我发现这会在 Windows 10 上的 Firefox 72 中呈现 limegreen 彩色滚动条：

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>

像这样：

但是 Firefox 拒绝呈现 浅绿色 彩色滚动条：

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>

看这个：

是什么导致了这种行为，我该如何预测？

PS。 Chrome 80 以默认样式显示两个滚动条。

PS。关于how to actively change scrollbar color in Firefox有个问题，但我不（现在）对“如何更改滚动条颜色”的实用建议感兴趣，但相反我是在询问并试图了解它何时以及为什么它自动发生，并且仅适用于一些背景颜色。

Answer 1

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>

使用滚动条颜色的作品（更多信息here）。我认为颜色检测真的很麻烦 - 有时一种颜色适用于滚动条颜色并适用于滚动条的两个部分，有时您需要重复两次。我只是认为这是 HTML 规范中实施不佳的部分。虽然没有很好的浏览器支持，但请确保它不是您界面的一部分。