元素在Safari上SVG外对象内部的错误位置

Question

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

[除了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>，并且实际上显示了视频元素。但是它的定位出了什么问题？

Answer 1

很难相信，这是一个bug in webkit。更难以置信的是，此错误是从... 2009年开始开放的！

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

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

个人评论：当这个错误被打开这么长时间时，我不明白为什么caniuse在Safari上支持foreignObject声明。

元素在Safari上SVG外对象内部的错误位置

问题描述投票：1回答：1

1个回答

最新问题

元素在Safari上SVG外对象内部的错误位置

问题描述 投票：1回答：1

1个回答

最新问题

问题描述投票：1回答：1