Safari中SVG路径的CSS drop-shadow阴影无法渲染问题

• Safari 内核（WebKit）对直接作用于 SVG 内部 <path> 元素的 CSS drop-shadow 滤镜存在已知渲染缺陷：当 SVG 配置了 preserveAspectRatio="none" 进行非等比拉伸，且根 SVG 标签设置了 fill="none" 属性时，WebKit 会错误计算滤镜的渲染边界，直接跳过阴影绘制流程。
• 代码中使用了空格分隔的现代 RGB 透明度语法 rgb(0 0 0 / 1)，Safari 14 及更早版本、部分 iOS 内嵌 WebView 对该语法支持不完善，解析失败时会直接导致整条滤镜规则失效。
• 通用标签选择器给 path 设置 fill 属性的写法，在部分 Safari 版本中会出现填充属性和滤镜的渲染顺序错乱，滤镜无法识别到元素的实际绘制区域，最终阴影不显示。

按改动成本从低到高排序：

• 最小改动方案：将滤镜规则从 path 选择器迁移到外层 SVG 标签上，同时把颜色写法替换为全版本兼容的 rgba 格式

  /* 移除path选择器上的filter规则 */
  .Tagline-triangle {
    filter: drop-shadow(5px 3px 17px rgba(0, 0, 0, 1));
  }
  path {
    fill: red;
  }
  

  滤镜挂载到外层 SVG 后，WebKit 可以正确获取元素的整体渲染边界，不会出现阴影丢失问题，适配绝大多数桌面端 Safari 场景。

• 全兼容方案：使用 SVG 原生内联滤镜替代 CSS 滤镜，从根源规避 WebKit 的 CSS 滤镜解析bug
  替换后的完整 SVG 代码如下：

  <svg style="height: 36px; width: 100%; background-color: #EAEAEA;" viewBox="0 0 436 217" preserveAspectRatio="none" class="Tagline-triangle is-red first triangle" fill="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <!-- 预留足够大的滤镜区域，避免拉伸时阴影被裁切 -->
      <filter id="triangleDropShadow" x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="5" dy="3" stdDeviation="17" flood-color="#000" flood-opacity="1"/>
      </filter>
    </defs>
    <path 
      class="triangle-shadow-downward" 
      d="M0 0H436V217L0 0Z" 
      fill="red"
      filter="url(#triangleDropShadow)"
    ></path>
  </svg>
  

  该写法将填充属性直接声明在 path 元素上，滤镜为 SVG 标准原生实现，兼容所有版本 Safari 及 iOS 端 WebView 场景，不会出现渲染异常。

• 无DOM改动Hack方案：给 path 添加1px的近透明描边，强制 Safari 重算元素渲染边界
  如果不想调整现有 DOM 结构和滤镜挂载位置，可以直接在原有CSS基础上添加如下规则：

  path {
    fill: red;
    filter: drop-shadow(5px 3px 17px rgba(0,0,0,1));
    /* 描边透明度极低，视觉上完全不可见 */
    stroke: rgba(255,255,255,0.01);
    stroke-width: 1px;
  }
  

  该方案通过给路径添加不可见描边，触发 WebKit 重新计算元素的可绘制区域，绕开滤镜边界计算为0的bug，适合临时快速修复场景。

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