Safari中transition结合drop-shadow滤镜渲染失效问题求助

问题现象 #

在Safari 16.4版本中，当给元素应用filter: drop-shadow，同时其子元素存在transform过渡动画时，会出现渲染失效问题——阴影无法跟随元素的过渡状态正常更新。该代码在Chrome和Firefox中可正常运行，尽管兼容性工具显示Safari早已支持该特性。

效果对比：

示例复现代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="round-shadow">
  <div>
    <img src="https://picsum.photos/240/240">
  </div>
</div>

CSS #

.round-shadow {
  display: block;
  width: 200px;
  height: 200px;
  margin: 20px auto;
  background: #efefef;
  border-radius: 50%;
  filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.75));
}

.round-shadow > div {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
}

.round-shadow img {
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.57, 0.21, 0.69, 1);
}

.round-shadow.hover img,
.round-shadow:hover img {
  transform: scale(1.05, 1.05);
}

JS #

function test() {
    $('.round-shadow').each(function(index) {
        $(this).toggleClass('hover');
    });
    setTimeout(test,600);
}
test();

失效原因分析 #

这是Safari的WebKit渲染引擎兼容性bug：当父元素应用filter: drop-shadow时，该滤镜会创建独立渲染层；而子元素的transform过渡会触发硬件加速的复合层更新。WebKit在这种跨层场景下，无法正确同步滤镜层与复合层的渲染状态，导致阴影无法跟随子元素过渡变化，出现渲染断层或失效。

drop-shadow基于元素最终像素生成阴影，对渲染层依赖更高，WebKit在处理这类跨层动画同步时存在逻辑疏漏。

最佳修复方案 #

方案1：使用box-shadow替代drop-shadow（优先推荐） #

当前场景中，父元素是带圆形边框和纯色背景的元素，box-shadow能实现与drop-shadow几乎一致的视觉效果，且WebKit对box-shadow与transform过渡的兼容性更好，不会出现渲染同步问题。

修复后的CSS代码：

.round-shadow {
  /*filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.75));*/ 
  box-shadow: 4px 4px 8px rgba(0, 0, 0, .75);
}

方案2：强制同步渲染层（备选） #

若必须使用drop-shadow（比如元素存在透明区域，需基于轮廓生成阴影），可通过给父元素添加will-change: filter或transform: translateZ(0)强制硬件加速，迫使WebKit同步滤镜层渲染状态，但该方案可能带来额外性能开销，仅作备选。

示例代码：

.round-shadow {
  display: block;
  width: 200px;
  height: 200px;
  margin: 20px auto;
  background: #efefef;
  border-radius: 50%;
  filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.75));
  will-change: filter; /* 强制渲染层同步 */
}

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