如何阻止Safari中元素边界框的尺寸变化？

问题背景 #

在SVG中使用大量<symbol>结合<use>元素实现基于translate的无限滚动动画，在Chrome/Edge/Firefox中表现正常，但在Safari及iOS浏览器中：

• 旋转SVG后，<use>元素的边界框尺寸会随动画持续变化，触发全文档频繁重绘，性能严重下降
• 后续发现即使不旋转，普通矩形的平移动画也会出现相同问题：Safari中元素边界框取整并在两个值间快速闪烁，引发全文档布局重计算，内容较多时会导致严重卡顿

已尝试的无效方案 #

• 动画实现方式：测试过CSS Keyframes、JavaScript Web Animation API、SVG原生<animate>/<animateTransform>，均无法解决边界框闪烁问题
• 性能优化属性：在目标元素及父元素上设置will-change: transform;、contain: strict;、isolation: isolate;甚至will-change: width, height;，无效果
• 元素属性调整：
  • 尝试px、vw、%等不同单位的width/height设置
  • 测试fixed、absolute、static等position属性
  • 其他各类CSS属性调整

关键细节 #

• Chrome/Edge/Firefox中元素边界框保留两位小数且全程稳定；Safari中边界框取整，在两个整数间快速切换
• 曾尝试通过父SVG的transform属性实现整体旋转，但Safari不生效，动画流畅但无旋转效果

最小复现代码 #

CSS #

@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(400px);
  }
  100% {
    transform: translateX(0);
  }
}

rect {
  animation: move linear infinite 10s;
}

HTML #

<svg width="500px" height="100px" xmlns="http://www.w3.org/2000/svg">
  <rect width="100px" height="100px"></rect>
</svg>

可行解决方案 #

1. 使用SVG viewBox替代固定width/height #

给SVG设置viewBox明确坐标系范围，配合preserveAspectRatio锁定比例，避免Safari对边界框的错误计算：

<svg viewBox="0 0 500 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100"></rect>
</svg>

2. 给动画元素的父容器设置transform-box: fill-box #

强制Safari使用元素自身的填充框作为变换基准，阻止边界框的动态变化：

svg > g {
  transform-box: fill-box;
}

@keyframes move-group {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(400px);
  }
  100% {
    transform: translateX(0);
  }
}

svg > g {
  animation: move-group linear infinite 10s;
}

<svg width="500px" height="100px" xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect width="100px" height="100px"></rect>
  </g>
</svg>

3. 对SVG应用精准的contain属性 #

使用contain: layout paint size限制浏览器重绘范围，配合will-change: transform提前告知浏览器优化：

svg {
  will-change: transform;
  contain: layout paint size;
}

4. 动画应用到父容器而非目标元素 #

将平移动画直接应用到父级<g>或SVG本身，减少单个元素的边界框计算：

@keyframes move-svg {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(400px);
  }
  100% {
    transform: translateX(0);
  }
}

svg {
  animation: move-svg linear infinite 10s;
}

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