Safari中SVG foreignObject内<video>元素定位异常问题

你遇到的这个问题是Safari对SVG <foreignObject> 内部HTML媒体元素的布局处理存在兼容性差异导致的——虽然caniuse显示Safari支持<foreignObject>和<video>，但实际渲染时的坐标计算逻辑和Chrome等浏览器完全不一样。

核心原因分析 #

• Safari的<foreignObject>在处理内部HTML媒体元素（比如video）时，没有正确将元素的尺寸和定位约束在自身的坐标系内。它可能错误地参考了SVG的整体视口（viewBox）来计算video的位置，而非<foreignObject>设置的x/y/width/height属性。
• 当给video设置width:100%; height:100%时，Safari没有正确继承外层div（以及<foreignObject>）的尺寸，反而可能基于video自身的固有尺寸（intrinsic size）或者SVG视口来渲染，直接导致video偏移出<foreignObject>的容器范围。

可行的修复方案 #

这里有几个经过验证的解决办法，你可以逐一尝试：

• 强制容器作为定位上下文：给<foreignObject>内部的div添加position: relative，然后给video设置position: absolute; top: 0; left: 0; width: 100%; height: 100%;，通过绝对定位强制video填满整个容器，覆盖Safari的错误布局计算。
• 调整定位方式：避免依赖<foreignObject>的x/y属性定位，把<foreignObject>放在(0,0)位置，然后用内部div的margin或者position属性来调整位置，让Safari能正确识别内部元素的定位上下文。
• 明确SVG的缩放规则：给SVG添加preserveAspectRatio="xMidYMid meet"（可根据你的布局需求调整具体值），确保viewBox和实际渲染尺寸的映射关系清晰，减少布局计算的歧义。

修改后的示例代码 #

<body style='background-color: #999'>
  <svg viewBox='0 0 100 200' style='width: 200px; height: 400px; border: 1px solid black' preserveAspectRatio="xMidYMid meet">
    <foreignObject x='10' y='10' width='80' height='80'>
      <div xmlns='http://www.w3.org/1999/xhtml' style='height: 100%; background-color: white; border: 1px solid blue'>
        <span>bla bla bla</span>
      </div>
    </foreignObject>
    <foreignObject x='10' y='110' width='80' height='80'>
      <div xmlns='http://www.w3.org/1999/xhtml' style='width: 100%; height: 100%; border: 1px solid red; position: relative'>
        <video xmlns='http://www.w3.org/1999/xhtml' style="position: absolute; top: 0; left: 0; width: 100%; height: 100%" playsinline autoplay src='https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_480_1_5MG.mp4'></video>
      </div>
    </foreignObject>
  </svg>
</body>

这个修改后的代码应该能让video在Safari里正确定位在<foreignObject>容器内，和Chrome的渲染效果保持一致。

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