Safari不识别CSS filter: blur()小数参数问题及解决方案咨询

针对Safari 14+ 不支持CSS blur滤镜小数像素参数的问题，目前有三种成熟的绕过方案，均可实现和Chrome/Firefox一致的亚像素文本模糊效果：

方案1：缩放变换实现等效亚像素模糊 #

该方案兼容性最优，原理是先将文本元素放大整数倍，应用整数像素的模糊效果后，再通过外层容器约束尺寸，间接得到小数精度的模糊效果。比如要实现0.6px等效模糊，放大5倍后应用3px模糊（3÷5=0.6）即可。

代码示例 #

<!-- 外层容器控制实际占位，不影响原有布局 -->
<div class="blur-wrapper">
  <div class="blur-inner">Hello 0.6px</div>
</div>

.blur-wrapper {
  /* 按原文本需求设置尺寸即可 */
  font-size: 16px;
  line-height: 1.5;
  height: 24px;
  overflow: hidden;
}
.blur-inner {
  transform-origin: left top;
  /* 放大5倍后加整数模糊 */
  transform: scale(5);
  filter: blur(3px);
}

说明 #

放大倍数可按需调整，倍数越高模糊精度越高，一般选5~10倍即可满足肉眼视觉需求，适合需要动态调整模糊值的场景。

方案2：使用SVG高斯模糊滤镜 #

Safari对SVG的feGaussianBlur滤镜的stdDeviation参数原生支持小数取值，直接定义SVG滤镜调用即可实现精准小数模糊。

代码示例 #

<!-- 定义SVG滤镜，放在页面任意位置，不占用布局空间 -->
<svg width="0" height="0" style="position:absolute;visibility:hidden;">
  <defs>
    <filter id="blur-06">
      <feGaussianBlur stdDeviation="0.6" />
    </filter>
  </defs>
</svg>

<div class="blur-svg">Hello 0.6px</div>

.blur-svg {
  filter: url(#blur-06);
}

说明 #

代码简洁，不需要修改元素布局，适合固定模糊值的场景，动态调整时需要修改SVG的stdDeviation属性。

方案3：text-shadow模拟轻量文本模糊 #

如果仅需要给文本添加1px以内的轻微模糊，可以直接用text-shadow模拟，不需要调用filter，兼容性最好。

代码示例 #

.blur-text {
  /* 隐藏原文本，用阴影模拟模糊效果 */
  color: transparent;
  text-shadow: 0 0 0.3px #000, 0 0 0.6px rgba(0,0,0,0.8);
}

说明 #

仅适用于文本场景，模糊值超过1px会出现明显重影，适合非常轻微的模糊需求。

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