Safari 15.0 视频元素位置修复在页面加载时不起作用

Question

我在使用 Safari 15.0 时遇到一些奇怪的问题。

我在这里进行了 jsfiddle 测试：https://jsfiddle.net/batdan420/3jrvgc2p/3/

您应该希望能够通过在 Safari 15.0 中访问该网址来复制该问题，并且还会发现这在其他现代浏览器上不是问题。

问题似乎与视频元素以固定位置开始有关。

这在过去版本的 Safari（和其他浏览器）上已经工作了很多年，但是当我更新 Safari 时，我发现我使用该代码的网站在页面加载时不再显示视频...

上面的示例应该可以更轻松地诊断/确认问题，但如果您想查看代码而不进行测试，这里是导致问题的代码行：

  <video style="left: 0;top: 0;height:100%;position:fixed;width: 100%;z-index: -20;" autoplay loop muted playsinline>
   <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
   </video>

我能够通过从CSS中删除position属性（当前是内联的用于测试目的）来解决这个问题，然后使用javascript/jquery将视频元素的CSS设置为文档准备好后固定的位置，但这是这不是最理想的解决方案。

当前版本的 Chrome (94.0) 或 Firefox (93.0) 似乎不会出现此问题。

也许我的代码有问题？或者这是 Safari 15.0 的问题吗？

Answer 1

我刚刚在 Safari 桌面上遇到了同样的问题。解决方案只是将视频标签放入具有固定位置的包装器中，因为 Safari 似乎无法直接在

video

标签上处理它。

这在 Safari 中不起作用：

<video style="position: fixed" src="..."></video>

这有效：

<div style="position: fixed">
    <video src="..."></video>
</div>

Answer 2

2024 签入：如果您遇到此问题，删除

preload

属性可能会修复它。

我在其他地方没有看到这个，希望这对某人有帮助。