CSS自定义滚动条在Chrome正常但Safari不显示或拉伸如何修复

异常根因 #

• ::-webkit-scrollbar规则中多余的overflow: scroll属性会触发Safari渲染bug，导致滚动条拉伸变形
• 用100000vh超大值box-shadow填充滑块背景的hack方案不兼容Safari滚动条渲染上下文，会导致滑块透明不显示
• Safari要求自定义滚动条样式的容器必须显式声明可滚动属性，否则会自动隐藏自定义滚动条样式

修复操作 #

1. 移除::-webkit-scrollbar规则内的overflow: scroll属性，仅保留宽度配置，需要控制水平滚动条可额外添加height属性
2. 放弃box-shadow填充滑块的hack方案，直接给::-webkit-scrollbar-thumb设置background属性为对应填充色
3. 给需要应用自定义滚动条的容器（全局生效则配置给html,body）添加overflow: auto和-webkit-overflow-scrolling: touch属性，确保Safari识别滚动行为
4. 可选配置::-webkit-scrollbar-corner规则设置交叉处背景，避免右下角出现空白色块

如果是局部容器应用自定义滚动条，只需将下述html,body的规则替换为对应滚动容器的选择器即可

修复后完整代码 #

/* 全局滚动条生效配置，局部使用替换为对应容器选择器 */
html,body {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar {
  width: 12px;
  /* 如需自定义水平滚动条高度取消下方注释 */
  /* height: 12px; */
}

::-webkit-scrollbar-track {
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(34, 127, 158)), to(rgba(225, 141, 175)));
  background: linear-gradient(0deg, rgba(34, 127, 158) 0%, rgba(225, 141, 175) 100%);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #F1F1F1;
  border-radius: 10px;
}

/* 可选：修复横竖滚动条交叉处空白 */
::-webkit-scrollbar-corner {
  background: transparent;
}

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