Pure CSS parallax effect with video background

Question

I am trying to create a parallax effect using pure CSS that also has a video background on the first frame. The effect works fine in Firefox and IE9+ but Chrome has a tearing effect on all the frames with "background-attachment: fixed".

I did manage to find an answer on here before that utilized an odd HTML layout and CSS clipping but I cant seem to find it anymore. The issue with that code was that I was unable to set the frames to min-height and allow the content to easily reflow on smaller viewports.

There are a lot of similiar questions on here but none of them seem to really be answered or they are referencing an older bug that seems to be fixed now. If I remove the video the background-attachment property behaves as expected. Perhaps these issues are related?

example: http://codepen.io/cluke009/pen/cdHJu

HTML

<div id="slide0" class="slide"></div>
<div id="slide1" class="slide"></div>
<div id="slide2" class="slide">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>....
</div>
<div id="slide3" class="slide">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>....
</div>
<div id="slide4" class="slide"></div>
<div id="slide5" class="slide"></div>

CSS

body,
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
p{
    margin: 0;
    padding: 10px 5%;
}
video {
    z-index: -9999;
    position: fixed;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    min-height: 100%;
    min-width: 100%;
}
.slide {
    box-sizing: border-box;
    height: auto;
    min-height: 100%;
    min-width: 100%;
    background-size: cover;
    box-shadow: inset 0 10px 10px rgba(0,0,0,.3);
}

.slide:nth-child(even) {
    background-attachment: fixed;
}
#slide1{
  background-image:url(http://www.placekitten.com/1000/900);
}
#slide2{
  background-image:url(http://www.placekitten.com/600/400);
}
#slide3{
  background-image:url(http://www.placekitten.com/1000/1000);
}
#slide4{
  background-image:url(http://www.placekitten.com/1000/800);
}

Schematize

What do you mean a 'tearing effect'? – Priam

We need to know what you meen by tearing effect. If you mean that the scroll is like little steps instead of soft, this is due to the implementation of the program itself. You could make a script that detects scroll, prevents it and then animates it with ease in and out effects. – Caseinogen

The only thing that stands out on Chrome is the video actually getting pixelated, is that what you mean by "tearing"? – Merrymaking

Just tested this on chrome in windows so it may be a mac only issue, im at home so can't test this right now. They also may have fixed the bug but I recall seeing it pretty recently at work. Basically what happens is you get stuck pixels or frame lag type effect and you can see holes through the background image. I have abandoned this particular usage since my initial post because I was able to come up with a reasonable compromise. If I get around to pulling the relevant code from my project I will update this. – Schematize

Answer 1

I think the tearing effect means strange gap from frame with kitten and text till next lonely shadow.

Your question possible duplicates Chrome issue with background-attachment fixed and position fixed elements

Tempered