React应用MacOS下白色背景滚动条异常问题排查与解决

问题现象 #

我正在开发一款React应用，近期发现滚动条出现白色背景，此前显示的是正常的深色轨道、透明背景样式。

我不清楚问题成因，经过大量调研仍未找到解决方案。我认为这与CSS无关，尽管已经尝试过color-scheme: dark等CSS方案。

系统环境排查 #

我使用Mac OS X系统，推测问题可能和系统相关，但另一台同版本Sonoma系统的Mac并未出现此问题。Mac系统设置中有三个滚动条选项：

• 选择默认的第一个选项，滚动条仍显示白色背景；
• 选择第二个“滚动时显示”选项，仅在滚动时可见滚动条，虽不符合预期但至少是无背景的默认样式，不过拖动轨道时仍会出现白色背景。

该问题在所有浏览器中均存在。

解决方案（2024年7月4日更新） #

最终通过以下CSS样式解决了问题：

/* Chrome scrollbar */
*::-webkit-scrollbar {
  width: 4px;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}

*::-webkit-scrollbar-track {
  background-color: auto;
}
/* Chrome scrollbar */

未针对Firefox添加样式，避免在其他浏览器中引发问题。

核心疑问 #

该问题本质和设备特性相关：Mac系统下，使用触控板时的滚动条样式与使用外接鼠标时不同——这属于系统的设备特性，因为触控操作无需依赖滚动条，因此样式会有区别。

内容的提问来源于stack exchange，提问作者Ric