SVG遮罩揭示动画在iOS 16及macOS Safari无法正常工作

1. Safari对SVG遮罩与动画的已知兼容问题 #

iOS16及对应版本的macOS Safari确实存在SVG遮罩动画的兼容缺陷：

• 当SVG容器设置为width="0" height="0"时，Safari会忽略内部<mask>等定义资源，导致遮罩完全不生效
• 对遮罩内元素的transform动画支持不完善，存在动画触发后遮罩不更新渲染的情况
• 初始状态为非可见的遮罩元素，动画过程中可能无法自动触发重绘

2. 现有实现的修复方案 #

针对你的代码，可按以下步骤修复：

• 调整SVG容器属性：将SVG的width/height设为100%，viewBox设置为包含遮罩元素的合理范围（如0 0 400 200），通过绝对定位隐藏SVG而非设置尺寸为0：

  <svg id="overlay-svg" width="100%" height="100%" viewBox="0 0 400 200" style="position: absolute; left: -9999px; pointer-events: none;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <filter id="displacementFilter">
        <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
      </filter>
      <mask id="rectMask">
        <rect width="200" height="5" rx="2.5" ry="2.5" fill="white" class="loader-reveal" x="100" y="100" />
      </mask>
    </defs>
  </svg>
  

• 替换transform动画为属性动画：移除transform="translate(100 100)"，改为直接设置x/y属性；动画时修改x、width等属性而非transform，规避Safari的transform渲染bug
• 强制触发重绘：在GSAP动画的onUpdate回调中添加微小样式变化，强制Safari更新渲染：

  gsap.to(".loader-reveal", {
    // 你的动画属性配置
    onUpdate: function() {
      this.targets()[0].style.opacity = 0.999999;
    }
  });
  

3. 更兼容的跨浏览器实现方式 #

• 使用CSS Clip-Path替代SVG Mask：CSS clip-path的动画在Safari中支持更稳定，适合实现矩形揭示效果：

  .reveal-content {
    clip-path: inset(50% 0 50% 0);
    transition: clip-path 0.6s ease-out;
  }
  .reveal-content.active {
    clip-path: inset(0 0 0 0);
  }
  

• 使用CSS Mask替代SVG Mask：现代浏览器支持CSS mask-image，可直接引用SVG遮罩定义，动画CSS属性更可靠：

  .reveal-content {
    mask-image: url(#rectMask);
    mask-size: 200px 5px;
    mask-position: center;
    mask-repeat: no-repeat;
    transition: mask-size 0.6s ease-out;
  }
  .reveal-content.active {
    mask-size: 100% 100%;
  }
  

• 规范SVG资源定义：所有SVG资源（mask、filter）所在的容器不能设置为尺寸0，可通过visibility: hidden或绝对定位隐藏，保留正常的width/height和viewBox设置

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