Safari 上 SVG foreignObject 中 <video> 元素的位置错误答案

【问题标题】：Wrong position of <video> element inside SVG foreignObject on SafariSafari 上 SVG foreignObject 中 <video> 元素的位置错误
【发布时间】：2020-09-05 18:26:12
【问题描述】：

我正在使用 <foreignObject> SVG 元素将 <video> 元素嵌入到基于 SVG 的 UI 中。

在所有浏览器上一切都很好，除了 Safari，其中视频元素的定位与其<foreingObject> 容器完全错误。

我建立了一个简单的页面来重现该问题，也可以在 Codepen 上找到：

<body style='background-color: #999'>
  <svg viewBox='0 0 100 200' style='width: 200px; height: 400px; border: 1px solid black'>

    <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'>
        <video xmlns='http://www.w3.org/1999/xhtml' 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>

这里是渲染页面：左侧是 Chrome 版本，右侧是 Safari 版本。

caniuse 表示 Safari 支持<foreignObject> 并且实际上显示了视频元素。但是它的定位有什么问题呢？

【问题讨论】：

可能是 safari 中的一个错误。你查过its bugtracker

标签： html svg safari

【解决方案1】：

难以置信，这是bug in webkit。更令人难以置信的是，这个错误自 ... 2009 年以来一直存在！！！

查看错误页面上的 cmets，发现可能的解决方法是将 position: fixed 添加到包含 video 元素的 div 的样式中。

感谢@Robert Longson 为我指明了正确的方向。

个人评论：我无法理解为什么 caniuse 声明 foreignObject 支持 Safari，而这个 bug 已经开放这么长时间了。

【讨论】：

唉，我还没有找到适合我的布局的解决方法。你有没有发现任何其他使它起作用的技巧？