Safari 15.0 视频元素位置固定在页面加载时不起作用答案

【问题标题】：Safari 15.0 video element position fixed not working on page loadSafari 15.0 视频元素位置固定在页面加载时不起作用
【发布时间】：2021-12-01 20:43:45
【问题描述】：

我在使用 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 中删除 position 属性（当前为测试目的而内联）然后使用 javascript/jquery 将视频元素的 css 设置为在文档准备好后固定位置来解决问题，但是这不是最理想的解决方案。

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

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

【问题讨论】：

看起来没有其他人有这个问题，或者有时间确认我的问题是否也发生在他们身上，所以我不确定这是否确实是一个错误，但是我相信它可能是。我猜有时看起来是错误的结果是某些晦涩标准的正确实现。如果其他人能够确认他们对这个主题的感受，那就太好了。
在阅读您的问题之前，我可以确认问题并偶然发现了相同的解决方案。你向 Webkit 团队报告了吗？
我提出了一个与我在 Apple 讨论板上问过的问题类似的问题，看看是否有人有明智的说法：discussions.apple.com/thread/253261371?page=1 到目前为止，我还不能说其他人在那里说过任何有用的东西，但很高兴在这里看到其他人至少可以确认这个问题。您是否在运行在不同操作系统上的单独 Webkit 浏览器上对此进行了测试 - 即不是专门在 Safari 15.0 上运行的？
没有在其他Webkit浏览器中测试过，没有。但我目前的解决方法不再需要 JS：将视频定位在一个执行定位的包装元素内。我forked your JSFiddle as an example。也许这会有所帮助。
我今天也发现了这一点。如果通过 CSS 设置了 position:fixed，则视频不会播放。

标签： html safari

【解决方案1】：

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

这在 Safari 中不起作用：

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

这行得通：

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

【讨论】：