我有一个问题，即背景视频导致网站的其余部分 Flink / Flink 时，在iPhone版本的Safari或Chrome浏览器上查看。它在全尺寸浏览器上按预期工作。如果我删除视频元素或添加display：none到上述元素，网站停止 Flink 。以下是该问题的工作版本：（删除）。我已经添加了一个示例视频，并删除了这个不完整的开发示例站点中的任何不相关信息。任何帮助将不胜感激。谢谢
acruukt91#
我今天遇到了类似的问题（iPhone 7的所有者，IOS14）。在Safari和Chrome浏览器中都可以看到令人讨厌的 Flink 。我有一个绝对定位的视频作为背景和一些元素“在上面”。这些元素 Flink 。其他人用-webkit-transform: translate3d(0,0,0);回答对我不起作用。在视频元素上添加-webkit-perspective: 1000;确实解决了我的问题。
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;
sgtfey8w2#
我也遇到了类似的问题，但以前的答案对我不起作用。我有一个视频标签绝对定位为背景（z-index: -98）和一些元素定位在顶部（z-index范围从-4到0）。视频标签一改变（源代码或CSS），上面的元素就会 Flink 。将顶部元素z-index更改为正数以某种方式解决了这个问题。
z-index: -98
z-index
6tdlim6h3#
希望这对其他有这个问题的人有帮助。这个问题似乎与safari如何呈现屏幕外元素有关。将-webkit-transform: translate3d(0,0,0);添加到任何有问题的元素，修复了该问题。
cczfrluj4#
我有一个光滑的滑块与视频幻灯片和文字覆盖在视频。在我的例子中，我添加了“z索引：-1”到视频标签，一切都开始正常工作。所有其他元素都没有z索引。
4条答案
按热度按时间acruukt91#
我今天遇到了类似的问题（iPhone 7的所有者，IOS14）。在Safari和Chrome浏览器中都可以看到令人讨厌的 Flink 。我有一个绝对定位的视频作为背景和一些元素“在上面”。这些元素 Flink 。其他人用
-webkit-transform: translate3d(0,0,0);回答对我不起作用。在视频元素上添加
-webkit-perspective: 1000;确实解决了我的问题。sgtfey8w2#
我也遇到了类似的问题，但以前的答案对我不起作用。我有一个视频标签绝对定位为背景（
z-index: -98）和一些元素定位在顶部（z-index范围从-4到0）。视频标签一改变（源代码或CSS），上面的元素就会 Flink 。将顶部元素
z-index更改为正数以某种方式解决了这个问题。6tdlim6h3#
希望这对其他有这个问题的人有帮助。
这个问题似乎与safari如何呈现屏幕外元素有关。将
-webkit-transform: translate3d(0,0,0);添加到任何有问题的元素，修复了该问题。cczfrluj4#
我有一个光滑的滑块与视频幻灯片和文字覆盖在视频。在我的例子中，我添加了“z索引：-1”到视频标签，一切都开始正常工作。所有其他元素都没有z索引。