OSX Safari中关联滚动的shadow scrollable elements滚动条不渲染问题

这类问题在Safari处理Shadow DOM内的滚动元素时确实挺常见的，结合你提到的现象，我来拆解下成因和可行的修复方案：

问题成因 #

1. Safari滚动条渲染优先级与Shadow DOM隔离性冲突：Safari对原生滚动条的渲染逻辑比较特殊，默认会把滚动条的层级压得很低。当滚动元素处于Shadow DOM中，且和其他元素有滚动偏移同步逻辑时，Shadow DOM的样式隔离可能导致滚动条被内部元素或Shadow根节点遮挡，浏览器也不会主动触发滚动条的重绘更新。
2. 动态z-index修改的不稳定问题：手动改z-index偶尔生效，是因为修改操作意外触发了浏览器的重绘，但Shadow DOM的样式上下文限制了z-index的作用范围，外部的z-index设置可能无法穿透到Shadow内部的滚动条元素上，所以效果不稳定。
3. 滚动同步逻辑的渲染抢占：当你频繁同步多个元素的滚动偏移时，Safari会优先处理滚动位置的更新，可能跳过滚动条的渲染步骤，导致滚动条“消失”。

修复方案 #

1. 显式定义滚动条样式（强制Safari渲染） #

给Shadow DOM内的滚动元素添加针对WebKit内核的滚动条样式，强制Safari渲染滚动条并提升其层级。这种方法比依赖系统默认样式更可靠：

/* 针对Shadow DOM内的滚动元素 */
.scrollable-shadow-element::-webkit-scrollbar {
  width: 8px; /* 垂直滚动条宽度 */
  height: 8px; /* 水平滚动条高度 */
  z-index: 1000; /* 确保在Shadow上下文内层级最高 */
}

.scrollable-shadow-element::-webkit-scrollbar-track {
  background-color: #f0f0f0;
  border-radius: 4px;
}

.scrollable-shadow-element::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

.scrollable-shadow-element::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

显式设置样式会让Safari把滚动条当作元素的一部分来渲染，而不是依赖系统的隐式渲染逻辑。

2. 滚动同步后强制触发重绘/回流 #

在滚动偏移同步完成后，强制浏览器触发元素的回流，确保滚动条状态被更新。可以用一个轻量的技巧实现：

function syncScrollPositions(sourceEl, targetEl) {
  // 同步滚动偏移
  targetEl.scrollTop = sourceEl.scrollTop;
  targetEl.scrollLeft = sourceEl.scrollLeft;

  // 强制Safari重绘滚动条
  targetEl.style.transform = 'translateZ(0)';
  void targetEl.offsetWidth; // 触发回流，强制浏览器计算布局
  targetEl.style.transform = '';
}

void targetEl.offsetWidth会强制浏览器立即计算元素的布局，触发重绘，让滚动条的状态同步更新。

3. 调整Shadow DOM的样式上下文 #

确保Shadow根节点没有设置会遮挡滚动条的样式，比如overflow: hidden或者过低的z-index。同时给滚动元素添加position: relative，让z-index在Shadow内部的上下文里生效：

.scrollable-shadow-element {
  position: relative;
  overflow: scroll; /* 强制显示滚动条 */
  z-index: 1; /* 在Shadow内部建立层级上下文 */
}

4. 优化滚动同步逻辑 #

如果滚动同步用了节流或防抖，调整时间间隔（比如从100ms改成50ms），避免滚动条渲染被过度延迟。另外，尽量在滚动事件的末尾执行重绘触发逻辑，确保滚动位置稳定后再更新滚动条。

验证建议 #

先尝试方案1+方案2的组合，这两个方法配合基本能解决大部分Safari下Shadow DOM滚动条不显示的问题。如果还是有问题，可以检查Shadow DOM内是否有其他元素的z-index过高，遮挡了滚动条。

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