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

Question

我正在使用HTML5视频元素作为背景层，效果很好，但是，它会导致页面上具有具有属性background-attachment: fixed的背景图像的其他元素出现问题。背景图像变得解开、分解或完全消失。如果我将视频包装器div 的 z 索引更改为积极的东西，问题就会消失，但这违背了将其用作背景层的目的。此问题仅发生在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中中断。

Answer 1

你找到解决这个问题的方法了吗？我有同样的问题，但是仅在野生动物园中。

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

镀铬位置：固定内侧位置：绝对中断与iframe/视频

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

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

Answer 2

只需将

HTML5视频包装在带有样式规则的dom元素中 位置：相对; 和溢出：隐藏;这将修复所有浏览器中的所有内容！

Answer 3

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

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

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

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

这是 JSFiddle

编辑：

这不适用于Chrome 35 Ubuntu