手机浏览器和Chrome浏览器出现背景视频故障

问题描述

我遇到一个问题，当在iPhone版本的Safari或Chrome浏览器上观看时，背景视频会导致网站的其余部分闪烁/闪烁。在全尺寸浏览器上可以正常工作。

如果我删除视频元素或在该元素上添加display：none，该站点将停止闪烁。

这是此问题的有效版本：（已删除）。

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

任何帮助将不胜感激。

谢谢

解决方法

我也遇到了类似的问题，但之前的答案对我不起作用。我有一个绝对定位为背景的视频标签 (z-index: -98) 和位于顶部的一些元素 (z-index 范围从 -4 到 0)。一旦视频标签（来源或 CSS）发生变化，顶部的元素就会闪烁。

将顶部元素 z-index 更改为正数以某种方式解决了问题。

,

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

问题似乎出在野生动物园如何渲染屏幕外元素。 将-webkit-transform: translate3d(0,0);添加到任何有问题的元素中，可以解决此问题。

,

我今天遇到了类似的问题（iPhone 7 的所有者，IOS14）。在 Safari 和 Chrome 浏览器中都能看到令人讨厌的闪烁。我有一个绝对定位的视频作为背景和一些“顶部”元素。这些元素闪烁。其他人使用 -webkit-transform: translate3d(0,0); 回答对我不起作用。

在视频元素上添加 -webkit-perspective: 1000; 确实解决了我的问题。