Il filtro sfocatura CSS non funziona su alcuni pseudo elementi in MS Edge

Question

Sto usando un filtro sfocatura sull'immagine di sfondo di uno pseudo elemento. Se l'indice z dello pseudo elemento è -1, la sfocatura non ha alcun effetto in Microsoft Edge. Funziona senza z-index. (È necessario abilitare manualmente i filtri CSS tramite about:flags in Edge).

Ecco l'esempio: http://codepen.io/anon/pen/WrZJZY?editors=110

È questo a causa di un supporto sperimentale (Edge) o sto facendo qualcosa di sbagliato qui? Funziona con altri browser (Chrome, Safari, Firefox).

.blur { 
    position:relative; 
    border: 4px solid #f00; 
    height:400px; 
    width:400px; 
} 

.blur:before { 
    content: ""; 
    position: absolute; 
    width:400px; 
    height:400px; 
    z-index:-1; 
    background-image:url('https://i-msdn.sec.s-msft.com/dynimg/IC793324.png'); 

    filter: blur(5px); 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5'); 
} 

Answer 1

Questo sembra essere un limite nella nostra implementazione. Sto inoltrando un problema in questo momento e avrò la squadra appropriata per valutare la riproduzione il prima possibile. Per ora, è probabile che l'opzione migliore eviti di posizionare l'immagine al di sotto del contenuto (con uno z-index negativo), e invece di posizionare il contenuto sopra l'immagine (con uno z-index più alto).

Fiddle: https://jsfiddle.net/jonathansampson/610arg2L/

/* Above Fiddle contains sample CSS */ 

Archiviato Problema: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9318580/