Effetto parallax CSS puro con sfondo video

Question

Sto provando a creare un effetto di parallasse utilizzando puro CSS che ha anche uno sfondo video sul primo fotogramma. L'effetto funziona bene in Firefox e IE9 + ma Chrome ha un effetto lacerante su tutti i fotogrammi con "background-attachment: fixed".

Sono riuscito a trovare una risposta qui prima che utilizzava uno strano layout HTML e ritaglio CSS, ma non riesco a trovarlo più. Il problema con quel codice era che non ero in grado di impostare i fotogrammi su min-height e consentire al contenuto di essere facilmente riportato su finestre più piccole.

Qui ci sono un sacco di domande simili, ma a nessuno di loro sembra davvero essere data una risposta o stanno facendo riferimento a un vecchio bug che sembra essere stato risolto ora. Se rimuovo il video, la proprietà background-attachment si comporta come previsto. Forse questi problemi sono correlati?

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

penso che l'effetto mezzi di lacerazione strano gap dal telaio con gattino e il testo fino al prossimo ombra solitaria .

vostri interrogativi possibili duplicati Chrome issue with background-attachment fixed and position fixed elements