Safari中CSS drop-shadow滤镜切换失效问题求助

问题场景 #

我有一张透明PNG图片，需要根据条件切换drop-shadow滤镜颜色，用Vue3类绑定实现：

:class="conditional ? 'trueCondition' : 'falseCondition'"

.trueCondition {
  filter: drop-shadow(0 0 5px #FF0000);
}
.falseCondition {
  filter: drop-shadow(0 0 5px #00FF00);
}

首次渲染滤镜显示正常，但切换条件时，Safari 16.1（推测其他版本也存在此问题）中滤镜颜色有时不更新——类已经正确切换，但滤镜未生效。Firefox中无此问题。

已尝试的方案均无效（或不符合需求）：

• 切换滤镜前先设置filter: none;
• 将CSS选择器移至main.css
• 将false条件改为filter: none;（此方法有效但不符合需求）
• 通过条件绑定src强制重新加载图片：

:src="conditional ? require('@/assets/image0.png') : require('@/assets/image1.png')"

需要一种无需「旧滤镜→无滤镜→新滤镜」多步渲染的解决方法。

可行解决方案 #

1. 给滤镜添加微小参数差异 #

Safari渲染引擎可能对结构完全一致的filter属性切换存在缓存优化，导致不更新。只需给两个滤镜的参数添加微小差异（视觉上无影响），就能绕过缓存：

.trueCondition {
  filter: drop-shadow(0 0 5.01px #FF0000);
}
.falseCondition {
  filter: drop-shadow(0 0 5px #00FF00);
}

也可以微调偏移量（比如0.01px），只要两个filter的字符串不完全相同即可。

2. 使用CSS变量动态绑定滤镜值 #

放弃类切换，改用Vue动态绑定CSS变量，直接修改滤镜值：

<img 
  :style="{ '--shadow-filter': conditional ? 'drop-shadow(0 0 5px #FF0000)' : 'drop-shadow(0 0 5px #00FF00)' }"
  class="shadow-image"
>

.shadow-image {
  filter: var(--shadow-filter);
}

这种方式直接修改CSS变量，Safari能正确识别属性变化并更新渲染。

3. 强制触发元素重绘 #

通过给元素添加临时的无视觉影响样式，强制Safari重绘元素：

// 条件切换时调用此方法
const forceRepaint = () => {
  const imgElement = document.querySelector('.target-image');
  // 添加临时transform触发重绘
  imgElement.style.transform = 'translateZ(0)';
  // 下一帧清除临时样式
  requestAnimationFrame(() => {
    imgElement.style.transform = '';
  });
};

调用此方法后，浏览器会重新渲染元素，滤镜即可正常更新。

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