CSS pure parallax effect with video background

Question

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

I managed to find the answer here before using the odd HTML layout and CSS cropping, but I can't find it anymore. The problem with this code was that I was not able to set the frames to the minimum height and allow the content to easily switch to smaller viewports.

There are many similar questions here, but they are not answered, or they refer to an older error that seems to be fixed. If I delete the video, the background-attachment property will behave as expected. Perhaps these problems 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); } 

Answer 1

I think the tearing effect means a weird gap from the frame with the kitten and text to the next lonely shadow.

Duplicates are possible in your question. Problem with Chrome with fixed fixed elements and fixed background elements.