Elemento video HTML5 posizionato in posizione assoluta con z-index negativo interrompe l'allegato in background nei browser Webkit

Question

Sto usando un elemento video HTML5 come livello di sfondo che funziona bene, tuttavia, sta causando problemi con altri elementi nella pagina che hanno un immagine di sfondo con la proprietà background-attachment: fixed. Le immagini di sfondo si scollano, si rompono o scompaiono completamente. Se cambio lo z-index del video wrapper div su qualcosa di positivo, il problema scompare ma ciò vanifica lo scopo di usarlo come livello di sfondo. Questo problema si verifica solo nei browser Webkit (Chrome e Safari).

Ecco il HTML di base:

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

E il 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%; 
} 

Ho creato un campione JSFiddle che illustra il problema. Funziona bene in Firefox, ma si interrompe in Chrome/Safari.

Answer 1

Hai trovato una soluzione per questo? Ho lo stesso problema, tuttavia solo nel safari.

Modifica Questo post è stato risolto per me.

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

Aggiungere questo a tutti position: fixed; elementi

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

Answer 2

Ho incontrato lo stesso problema. La correzione di Corey non risolveva il bug per il mio elemento background-attachment: fixed.

Tuttavia, sono riuscito a farlo funzionare. All'interno dell'elemento che dichiara background-attachment: fixed aggiungo

Non sono del tutto sicuro del motivo per cui funziona, ma credo che sia perché il pixel 1x1 impone al browser di ridipingere anche l'elemento padre.

PS: Non deve essere un elemento img, può essere qualsiasi elemento.

Ecco la Modifica JSFiddle

:

Questo fa NON lavoro su Chrome 35 Ubuntu

Answer 3

Basta avvolgere video HTML5 in elemento DOM con la posizione regole di stile: relative; e overflow: nascosto; Questo risolverà tutto in tutti i browser!