Safari浏览器中CSS Filter hover阴影异常及状态无法恢复的解决方法

问题说明 #

给按钮写了以下hover状态的CSS滤镜阴影样式：

初始状态代码：

-webkit-filter: drop-shadow(0 0 0px rgba(0, 0, 0, 0));
transition: transform .6s ease-in-out, filter .8s ease-in-out;
transform: translateZ(0);

hover状态代码：

transform: scale(1.001) translateZ(0);
-webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.8));
filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.8));

这套样式在Chrome、Firefox等浏览器里正常，但Safari上有两个问题：

• hover前显示没问题，hover后会出现奇怪的透明阴影
• 鼠标移开后，按钮没法恢复到hover前的正常状态

hover前效果：按钮显示正常，无异常阴影
hover后效果：按钮上覆盖一层诡异的透明阴影，样式无法回退

问题根源 #

Safari对CSS filter 属性的过渡渲染存在兼容性bug：当初始状态用 drop-shadow(0 0 0px rgba(0,0,0,0)) 这种"零尺寸透明阴影"作为过渡起点时，浏览器无法正确处理到真实阴影的过渡逻辑，不仅会生成异常阴影，还会导致过渡状态无法正常回退。

解决办法 #

把初始状态的透明drop-shadow替换为filter: none，让过渡在"无滤镜"和"带阴影滤镜"之间进行，就能修复Safari的渲染问题：

修改后的完整代码：

/* 按钮基础样式 */
button {
  /* 你的其他按钮样式 */
  transition: transform .6s ease-in-out, filter .8s ease-in-out;
  transform: translateZ(0);
  /* 替换原有的透明drop-shadow */
  filter: none;
  -webkit-filter: none;
}

/* hover状态 */
button:hover {
  transform: scale(1.001) translateZ(0);
  -webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.8));
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.8));
}

补充建议 #

如果上面的方案仍有问题，可以尝试：

• 移除translateZ(0)（它用于触发硬件加速，但可能和Safari的滤镜渲染冲突）
• 调整filter的过渡时长，让它和transform保持一致，避免渲染不同步

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