css – 绝对定位的HTML5视频元素与负z指数破坏背景附件在webkit浏览器

我正在使用 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中断.

解决方法

你找到一个修复吗？
我有同样的问题,但只有在野生动物园.

编辑
这个帖子在这里为我修复.

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

将其添加到所有位置：fixed;分子

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

原文地址：https://www.jb51.cc/css/214233.html