具有负 z-index 的绝对定位 HTML5 视频元素会破坏 webkit 浏览器中的背景附件

Posted 2023-03-05

【中文标题】具有负 z-index 的绝对定位 HTML5 视频元素会破坏 webkit 浏览器中的背景附件

【英文标题】：Absolute positioned HTML5 video element with negative z-index breaks background-attachment in webkit browsers

【发布时间】：2013-10-16 00:39:37

【问题描述】：

我使用 html5 视频元素作为背景层，效果很好，但是，它会导致页面上其他元素出现问题，这些元素的背景图像具有属性 background-attachment: fixed。背景图像变得松散、破碎或完全消失。如果我将视频包装器 div 的 z-index 更改为正值，问题就会消失，但这会破坏将其用作背景层的目的。此问题仅出现在 webkit 浏览器（Chrome 和 Safari）中。

这是基本的 HTML：

<section class="fixed-background">
    <p>...</p>
</section>

<section>
    <div class="video-background">
        <video loop autoplay muted>
            <source src="video.mp4" type="video/mp4">
            <source src="video.webm" type="video/webm">
        </video>
    </div>
    <p>...</p>
</section>

<section class="fixed-background">
    <p>...</p>
</section>

还有 CSS：

.fixed-background 
    background: url('image.jpg') center center;
    background-size: cover;
    background-attachment: fixed;

.video-background 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;

.video-background video 
    min-width: 100%;
    min-height: 100%;

我创建了一个示例JSFiddle 来说明问题。在 Firefox 中运行良好，但在 Chrome/Safari 中会中断。

【问题讨论】：

您找到解决方法了吗？是科里的吗？

@LeeProbert 所提供的答案都没有解决我的特定案例的问题。该问题在当前版本的 Safari 中不再存在，但是，Chrome (44.0.2403) 仍然存在绘制固定背景的问题。

【参考方案1】：

只需使用样式规则将 HTML5 视频包装在 dom 元素中 position: relative;和溢出：隐藏；这将修复所有浏览器中的所有问题！

【参考方案2】：

我遇到了同样的问题。 Corey 的修复没有解决我的 background-attachment: fixed 元素的错误。

但是，我能够让它工作。在声明background-attachment: fixed 的元素内我添加<img style="height: 1px; width: 1px; position: fixed;">

我不完全确定为什么会这样，但我相信这是因为 1x1 像素会迫使浏览器也重新绘制父元素。

PS：不一定是img元素，可以是任意元素。

这里是JSFiddle

编辑：

这不在 Chrome 35 Ubuntu 上工作

【参考方案3】：

您找到解决方法了吗？ 我有同样的问题，但仅限于 safari。

编辑 这篇文章在这里为我修好了。

Chrome position:fixed inside position:absolute breaking with iframe / video

将此添加到所有位置：固定；元素

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);