background-clip:padding-box在宽透明边框滚动条中失效的原因及修复原理

我尝试用隐形边框方案自定义水平滚动条样式，多数场景下表现正常，但当边框宽度过大的边缘场景中出现样式异常。示例代码如下：

CSS 代码 #

.box,
.content {
  box-sizing: border-box;
}

.box {
  width: 500px;  
  overflow-x: auto;
}

.box::-webkit-scrollbar-track, 
.box::-webkit-scrollbar-thumb {
    border-radius: 3px;
    border-width: 20px 15px 0px;
    border-color: rgba(0, 0, 0, 0);
    border-style: solid;
    background-clip: padding-box;
}

.box::-webkit-scrollbar-thumb {
    background-color: #000;
}

.box::-webkit-scrollbar-track {
    background-color: #D2D2D2;
}

.box::-webkit-scrollbar {
    height: 22px;
    width: 0;
}

.content {
  width: 800px;
  height: 10px;
  background: linear-gradient(45deg, red, blue);
}

.box.is-fixed::-webkit-scrollbar-track, 
.box.is-fixed::-webkit-scrollbar-thumb {
  border-radius: 0px;
}

HTML 代码 #

<p>Scrollbar styled incorrectly:</p>

<div class='box'>
  <div class='content'>
  
  </div>
</div>

<p>Desired style:</p>

<div class='box is-fixed'>
  <div class='content'>
  
  </div>
</div>

我找到两种可行的修复方式，但不清楚背后的原因：

• 将border-radius从3px改为0或1px
• 将上边框宽度从20px改为19px

原方案失效原因 #

这是WebKit内核处理滚动条伪元素时的圆角与边框尺寸冲突导致的：

• 滚动条总高度由::-webkit-scrollbar的height设为22px
• 给滚动条轨道和滑块设置了20px的上边框，留给背景内容区域的垂直空间只剩22px - 20px = 2px
• 此时设置的3px圆角半径大于内容区域的垂直高度（2px），WebKit无法正确计算圆角与边框的布局关系，导致背景区域被异常截断或偏移，最终滚动条样式不符合预期。

修复方法生效原因 #

1. 调整border-radius为0或1px #

当圆角半径≤内容区域的垂直高度（2px）时，WebKit可以正常处理圆角与边框的组合渲染，background-clip: padding-box能正确将背景限制在边框内部的padding区域，滚动条样式恢复正常。

2. 将上边框宽度改为19px #

修改后内容区域的垂直高度变为22px - 19px = 3px，刚好等于原来的3px圆角半径，WebKit可以正确计算圆角的渲染范围，背景区域能正常填充到圆角边框内，不会出现尺寸冲突导致的样式异常。

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