Chrome下绝对定位无宽高SVG远Y轴元素渲染偏移是渲染bug吗？

这是Chromium内核（Chrome、Edge等浏览器）的已知SVG渲染Bug。
根本原因是Chromium对未显式声明宽高、设置了overflow: visible的绝对定位SVG做绘制优化时，错误计算了有效绘制视口范围，仅渲染层出现偏移，交互层（光标命中、事件触发）的坐标计算完全符合标准，Firefox的渲染逻辑符合SVG规范预期。

以下方案均不需要提前固定SVG宽高，适配运行时尺寸不确定的业务场景：

• 方案1（优先推荐，改造成本最低）：给SVG元素触发GPU合成层渲染，绕开CPU绘制的错误优化，仅需新增一行CSS即可：

#line {
  /* 原有样式保留，新增以下任意一行属性即可 */
  transform: translateZ(0);
  /* 若有层级冲突也可替换为 will-change: contents，效果一致 */
}

该方案无需改动DOM结构和业务逻辑，实测可完全修复示例中的偏移问题。

• 方案2（性能最优，适合SVG内容频繁更新的场景）：动态计算内容边界设置viewBox属性：

function adjustSvgViewBox(svgEl) {
  const contentBbox = svgEl.getBBox();
  svgEl.setAttribute('viewBox', `${contentBbox.x} ${contentBbox.y} ${contentBbox.width} ${contentBbox.height}`);
}
// 每次SVG内部元素新增/修改后调用即可
adjustSvgViewBox(document.getElementById('line'));

该方案完全遵循SVG标准规范，渲染稳定性最高。

• 方案3（零代码逻辑改动，适合坐标范围可控的场景）：在SVG内部添加超大范围透明占位矩形，强制浏览器计算正确的绘制范围：

<svg xmlns="http://www.w3.org/2000/svg" id="line">
  <!-- 占位矩形尺寸可根据业务实际最大坐标范围调整 -->
  <rect x="-10000" y="-10000" width="20000" height="20000" fill="transparent" />
  <!-- 原有SVG内容保持不变 -->
  <path d="M 350 4000 L 350 4100" fill="red" />
  <circle cx="350" cy="4050" r="10" fill="blue" />
</svg>

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