html - 错误的位置
问题描述
我正在使用SVG 元素在基于 SVG 的 UI<foreignObject>
中嵌入一个元素。<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声明<foreignObject>
在 Safari 上受支持,并且实际上显示了视频元素。但它的定位有什么问题?
解决方案
难以置信,这是webkit 中的一个错误。更令人难以置信的是,这个错误自 ... 2009 年以来一直存在!!!
查看 bug 页面上的注释,发现可能的解决方法是添加position: fixed
到div
包含video
元素的样式中。
感谢@Robert Longson 为我指明了正确的方向。
foreignObject
个人评论:当这个错误开放这么长时间时,我不明白为什么 caniuse 声明在 Safari 上支持。
推荐阅读
- c - 即使包含必需的标头,隐式声明错误
- javascript - 我可以使用 JavaScript 在 CSS 中只选择一个子 div,而不选择父级吗?
- python-3.x - networkx:绘制多方图时的节点间距
- reactjs - 有没有办法防止损坏的反应渲染使整个页面崩溃?
- php - PWA 自定义安装
- java - 链接到另一段代码 - java - 初学者
- r - 如何获取 Flexdashboard 文档中的当前活动选项卡以响应式显示不同的 UI
- docker - 在openshift中限制未经授权的登录
- list - 如何使用嵌套的 for 循环创建随机列表
- angular - ArcGIS 4.16 Angular中内容的弹出模板自定义功能