为何CSS drop-shadow滤镜在Chrome中偏移但Firefox中正常？

一、可行的解决方案 #

1. 改用SVG滤镜实现轮廓（推荐，跨浏览器一致） #

SVG滤镜能精确控制轮廓效果，各浏览器渲染表现一致，避免偏移问题：

<!-- 定义SVG滤镜 -->
<svg width="0" height="0" viewBox="0 0 0 0">
  <filter id="image-outline">
    <!-- 扩展图像边缘生成轮廓 -->
    <feMorphology operator="dilate" radius="1" in="SourceAlpha" result="dilated"/>
    <!-- 将轮廓转为黑色 -->
    <feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" in="dilated" result="black-outline"/>
    <!-- 叠加轮廓与原图 -->
    <feMerge>
      <feMergeNode in="black-outline"/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
</svg>

<!-- 应用滤镜的图片 -->
<img src="https://sen.fish/images/navigation/statue2/frame_00_delay-0.1s.gif" style="filter: url(#image-outline);">

2. 调整drop-shadow叠加逻辑（兼容现有CSS写法） #

若坚持使用CSS drop-shadow，可通过补充8方向阴影抵消偏移（效果稳定性略逊于SVG）：

img {
  filter: drop-shadow(1px 0 0 black)
          drop-shadow(-1px 0 0 black)
          drop-shadow(0 1px 0 black)
          drop-shadow(0 -1px 0 black)
          drop-shadow(1px 1px 0 black)
          drop-shadow(-1px 1px 0 black)
          drop-shadow(1px -1px 0 black)
          drop-shadow(-1px -1px 0 black);
}

3. 文字轮廓专用方案 #

如果是给文字添加轮廓，优先使用text-stroke属性，高效且无偏移：

.text-outline {
  -webkit-text-stroke: 1px black;
  text-stroke: 1px black;
  /* 可选：设置文字内部填充色 */
  color: white;
}

二、浏览器渲染差异的原因 #

Firefox与Chromium对连续drop-shadow滤镜的叠加计算逻辑存在差异：

• Firefox中，每个drop-shadow的偏移基于原始元素的坐标系统计算，多次叠加后轮廓均匀。
• Chromium中，每个后续drop-shadow基于前一个滤镜输出的图像坐标偏移，多次叠加会产生微小的偏移累积，最终导致轮廓偏移。

这种差异源于CSS规范对滤镜叠加的坐标参考系未做强制统一，属于浏览器厂商的实现细节差异。

三、是否属于浏览器Bug？ #

严格来说这不算标准Bug，因为CSS规范未明确规定连续drop-shadow叠加时的坐标计算规则。但如果该差异严重影响预期效果，可向Chromium项目提交反馈，推动实现对齐。

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