CSS属性overflow: overlay已废弃，求跨浏览器兼容的替代方案

CSS属性overflow: overlay曾是兼顾屏幕阅读器的方案，用来模拟iOS风格的滚动条——覆盖在可滚动元素上，仅在:hover或:focus时显示。如今W3C将其归为overflow: auto的别名，导致滚动条轨道始终显示，在带border-radius的容器场景下会出现违和的直角边缘。

市面上有类似simplebar的工具，但这类方案会注入大量嵌套<div>，对屏幕阅读器的无障碍访问不友好，尤其针对<table>元素。本文不讨论视觉无障碍标准（4:5:1），也不要求桌面浏览器始终显示滚动条，聚焦于UX视角下内容呈现的通用技术限制。

问题场景 #

上图中容器设置了border-radius，但滚动条轨道破坏了视觉一致性，显得违和。

自定义滚动条实现代码 #

我编写了如下Sass混合宏，尝试实现符合需求的自定义滚动条：

@mixin scroll-bars() {
  overflow: auto;

  &::-webkit-scrollbar {
    background-color: transparent;
    height: $space-m;
    width: $space-m;
  }

  &::-webkit-scrollbar-button {
    display: none;
  }

  &::-webkit-scrollbar-corner {
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
    border: 5px solid transparent;
    border-radius: 24px;
    box-shadow: 4px 0px 0px 4px rgba(105, 113, 127, 0.7) inset;
  }

  &::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    background-color: transparent;
  }

  &::-webkit-scrollbar-track-piece {
    background-color: transparent;
  }

  // Firefox
  scrollbar-color: rgba(105, 113, 127, 0.7) transparent;
  scrollbar-width: 16px;
}

不同浏览器的渲染效果 #

在Safari、Chromium和Opera中，上述代码可以正常渲染，效果符合预期：

但在Firefox中，渲染效果出现问题：

求助与疑问 #

目前我不清楚为何Firefox中设置transparent作为轨道颜色后，滚动条轨道会显示为不透明白色。如果有开发者研究过该问题并能提供扩展解决方案，欢迎分享经验。

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