Safari 上 SVG foreignObject 中 <video> 元素的错误位置
我正在使用<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声明<foreignObject>Safari 支持并且实际上显示了视频元素。但是它的定位有什么问题呢？
ser*_*l70 10
很难相信，这是webkit 中的一个错误。更难以置信的是，这个 bug 自 2009 年以来就一直存在！
查看错误页面上的评论，发现可能的解决方法是添加到包含该元素position: fixed的样式。divvideo
感谢@Robert Longson 为我指明了正确的方向。
个人评论：我不明白为什么caniuseforeignObject在这个bug开放这么长时间的情况下声明在Safari上受支持。
- 唉，我还没有找到适合我的布局的解决方法。您是否发现了其他使其发挥作用的技巧？ (3认同)
| 归档时间： |
|
| 查看次数： |
457 次 |
| 最近记录： |