Absolute positioned HTML5 video element with negative z-index breaks background-attachment in webkit browsers

Question

I'm using an HTML5 video element as a background layer which works fine, however, it's causing problems with other elements on the page that have a background image with the property background-attachment: fixed. The background images become unstuck, broken up, or disappear completely. If I change the z-index of the video wrapper div to something positive the problem disappears but that defeats the purpose of using it as a background layer. This problem is only occurring in webkit browsers (Chrome and Safari).

Here's the basic 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>

And the 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%;
}

I've created a sample JSFiddle that illustrates the problem. Works fine in Firefox, but breaks in Chrome/Safari.

Solution 1

Did you find a fix for this? I have the same issue, however only in safari.

Edit This post here fixed it for me.

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

Add this to all position: fixed; elements

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

Solution 2

Just wrap HTML5 video in dom element with styling rules position: relative; and overflow:hidden; This will fix everything in all browsers!

Solution 3

I ran across the same issue. Corey's fix did not resolve the bug for my background-attachment: fixed element.

However, I was able to get it working. Inside the element that declares background-attachment: fixed I add <img style="height: 1px; width: 1px; position: fixed;">

I'm not entirely sure as to why this works, but I believe it's because the 1x1 pixel forces the browser to repaint the parent element as well.

PS: It doesn't have to be an img element, it can be any element.

Here is the JSFiddle

Edit:

This does NOT work on Chrome 35 Ubuntu