Microsoft Edge non supporta filter: blur(); come dovrebbe. Se ho un elemento posizionato in modo assoluto con filter: blur();, gli input visualizzati in cima diventeranno matti, unendosi alla sfocatura (divertente da guardare).: sfocatura non funziona su MS Edge
Ecco un Fiddle per mostrare cosa succede. Funziona perfettamente in Chrome e Firefox, ma Edge si trasforma in un epilettico borderline. Basta cliccare l'ingresso e godere: https://jsfiddle.net/Cthulhu/3uz0Lpfz/2/
Ecco un esempio di codice:
<style>
article {
background: url(http://uzebox.org/wiki/images/1/19/Arkanoid.gif) no-repeat;
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-o-filter: blur(20px);
-ms-filter: blur(20px);
filter: blur(20px);
height: 448px;
position: absolute;
width: 720px;
}
input {
margin: 100px 0 0 20px;
position: relative;
}
</style>
<article></article>
<input />
Si può anche provare a mettere una finestra di Esplora sulla parte superiore del violino, sarà "interagire" con la sfocatura dell'immagine , che è divertente. Ho provato a prendere uno screenshot, ma il risultato finale mostra le cose come dovrebbero essere, e ignora il bug (non è divertente :-().
Tutte le idee per andare a questo problema utilizzando solo i CSS?
Non ho questo fermo come pensavo, ma non credo che Edge supporti questo come lo si sta usando, ma sono confuso sul perché dovrebbe funzionare in IE. Gli effetti filtro non dovrebbero funzionare in IE affatto. – Rob
@Rob Il mio errore: il violino non funziona in IE. Credo che quando ho provato questo nel mio sito web stavo vedendo qualcosa di sbagliato. Grazie per il testa a testa. – Cthulhu
Questo sembra essere un problema di rendering specifico per i filtri. Sarei sorpreso se esistesse una soluzione CSS che non comportava la semplice disattivazione dei filtri. – BoltClock