posizione fissa non funziona quando i filtri CSS applicati sullo stesso elemento in Microsoft Edge

sto testando questo sul bordo 20.10240.16384.0posizione fissa non funziona quando i filtri CSS applicati sullo stesso elemento in Microsoft Edge

Ho un elemento la cui posizione è fissa ed ha filtri CSS applicati ad esso. Funziona alla grande in tutti i browser eccetto Microsoft Edge, dove la posizione dell'elemento non rimane fissa. Questo problema è direttamente correlato ai filtri CSS3 poiché rimuovendoli, la posizione viene corretta correttamente.

Ecco un esempio di base. Funziona correttamente (ovvero lo sfondo fisso rimane fisso) su browser diversi da Microsoft Edge.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    body { 
 
     height: 5000px; 
 
    } 
 
    
 
    .fixed { 
 
     position: fixed; 
 
     left: 0; 
 
     background-image: url(https://lh5.googleusercontent.com/-REJ8pezTyCQ/SDlvLzhAH-I/AAAAAAAABeQ/mC1PXNiheJU/s800/Blog_background_750.gif); 
 
     background-repeat: repeat; 
 
     background-attachment: fixed; 
 
     height: 100%; 
 
     width: 100%; 
 
     -webkit-filter: brightness(70%); 
 
     -moz-filter: brightness(70%); 
 
     -o-filter: brightness(70%); 
 
     filter: brightness(70%); 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class='fixed'></div> 
 
</body> 
 

 
</html>

Dopo la ricerca intorno, mi sono imbattuto in https://connect.microsoft.com/IE/feedback/details/1810480/ms-edge-rendering-problem-of-css-filter, che dettaglia lo stesso problema, ma è stato contrassegnato come fisso più probabile che, come non poteva essere riprodotto. Vi allego GIF per la stessa -

Microsoft Edge -

Google Chrome -

fonte

2016-03-03 Prayag Verma

Sembra che non ci sia una soluzione. Non sono stato in grado di trovare nulla e MS sembra non essere in grado di riprodurlo ... – VikingBlooded

Posso riprodurlo dato il tuo esempio. Ho provato a cambiare larghezza e altezza per usare 100vw e 100vh e impostare 'bottom: 0px', il che almeno lo faceva sembrare * a volte * funziona quando ho attivato e disattivato la regola CSS del filtro. Le operazioni di tabulazione alt-time tra le finestre, poi, di tanto in tanto hanno funzionato di nuovo, il che non è certamente abbastanza buono. Penso che questo sia un bug di Edge. – Katana314

@ Katana314 Sono stato in grado di risolvere questo problema non applicando la posizione corretta e i filtri CSS sullo stesso elemento, ma altrimenti, come suggerisci, il comportamento è molto irregolare –

Si tratta di un bug, ms-edge-rendering-problem-of-css-filter, avrebbe dovuto essere fissata ma ovviamente non.

Ecco una soluzione alternativa, in cui è ancora possibile utilizzare position: fixed e l'immagine e il filtro viene impostato utilizzando lo pseudoelemento :after.

body { 
 
    height: 5000px; 
 
} 
 

 
.fixed { 
 
    position: fixed; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.fixed:after { 
 
    content: ' '; 
 
    position: absolute; 
 
    left:0; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-image: url(https://lh5.googleusercontent.com/-REJ8pezTyCQ/SDlvLzhAH-I/AAAAAAAABeQ/mC1PXNiheJU/s800/Blog_background_750.gif); 
 
    background-repeat: repeat; 
 
    background-attachment: fixed; 
 
    -webkit-filter: brightness(70%); 
 
    -moz-filter: brightness(70%); 
 
    -o-filter: brightness(70%); 
 
    filter: brightness(70%); 
 
}

<div class='fixed'></div>

fonte

2016-03-05 19:52:04 LGSon

posizione fissa non funziona quando i filtri CSS applicati sullo stesso elemento in Microsoft Edge

risposta

Problemi correlati