移动 safari 和 chrome 上的背景视频故障

Question

我有一个问题，即在 iPhone 版本的 Safari 或 Chrome 上查看时，背景视频会导致网站的其余部分闪烁。它在全尺寸浏览器上按预期工作。

如果我删除视频元素或添加 display:none 到所述元素，网站将停止闪烁。

这是该问题的工作版本：（已删除）。

我添加了一个示例视频并从这个不完整的开发示例站点中删除了所有不相关的信息。

任何帮助将不胜感激。

谢谢

Answer 1

我今天遇到了类似的问题（iPhone 7，IOS14 的所有者）。在 Safari 和 Chrome 浏览器中都会出现恼人的闪烁。我有一个绝对定位的视频作为背景和一些“在上面”的元素。这些元素闪烁。其他人使用

-webkit-transform: translate3d(0,0,0);

回答对我不起作用。

在视频元素上添加

-webkit-perspective: 1000;

确实解决了我的问题。

Answer 2

我也遇到了类似的问题，但之前的答案对我不起作用。我有一个绝对定位为背景的视频标签（

z-index: -98

）和一些位于顶部的元素（

z-index

范围从-4到0）。一旦视频标签发生变化（来源或 CSS），顶部的元素就会闪烁。

将顶部元素

z-index

更改为正数以某种方式解决了这个问题。

Answer 3

希望这对遇到此问题的其他人有所帮助。

问题似乎与 safari 如何渲染屏幕外元素有关。 将

-webkit-transform: translate3d(0,0,0);

添加到任何有问题的元素，解决了问题。

Answer 4

我有一个光滑的滑块，上面有视频幻灯片和覆盖在视频上的文本。在我的例子中，我将“z-index：-1”添加到视频标签，一切都开始正常工作。所有其他元素都没有 z 索引。