Pure CSS Parallax Effekt mit Videohintergrund

Question

Ich versuche, einen Parallax Effekt mit reinem CSS zu erzeugen, das auch einen Video Hintergrund auf dem ersten Frame hat. Der Effekt funktioniert gut in Firefox und IE9 +, aber Chrome hat einen reißenden Effekt auf alle Bilder mit "background-attachment: fixed".

Ich habe es geschafft, eine Antwort auf hier zu finden, die ein seltsames HTML-Layout und CSS-Clipping verwendet, aber ich kann es nicht mehr finden. Das Problem mit diesem Code war, dass ich die Frames nicht auf Min-height setzen konnte und den Inhalt auf kleineren Viewports einfach auflösen ließ.

Es gibt viele ähnliche Fragen hier, aber keine von ihnen scheint wirklich beantwortet zu werden oder sie verweisen auf einen älteren Fehler, der jetzt anscheinend behoben ist. Wenn ich das Video entferne, verhält sich die Eigenschaft background-attachment wie erwartet. Vielleicht hängen diese Probleme zusammen?

Beispiel: 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

denke ich, das Zerreißen Effekt bedeutet seltsame Lücke von Rahmen mit Kätzchen und Text bis zum nächsten einsamen Schatten .

Ihre Frage möglich Duplikate Chrome issue with background-attachment fixed and position fixed elements