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

Question

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

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

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

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

这在过去版本的 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 中删除位置属性（当前出于测试目的而内联）然后使用 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>