CSS Unschärfe-Filter funktioniert nicht auf bestimmte Pseudo-Elemente in MS Edge

Question

Ich benutze einen Unschärfe-Filter auf ein Pseudo-Element Hintergrundbild. Wenn der Z-Index des Pseudoelements -1 ist, hat die Unschärfe in Microsoft Edge keine Auswirkungen. Es funktioniert ohne Z-Index. (Sie müssen CSS-Filter manuell über about:flags in Edge aktivieren).

Hier ist das Beispiel: http://codepen.io/anon/pen/WrZJZY?editors=110

Ist dies aufgrund experimentelle Unterstützung (in Rand) oder bin ich hier falsch, etwas zu tun? Es funktioniert in anderen Browsern (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

Dies scheint eine Einschränkung in unserer Implementierung zu sein. Ich lege gerade ein Problem an und lasse das Repro so bald wie möglich von einem geeigneten Team beurteilen. Im Moment ist es wahrscheinlich die beste Option, das Bild unter dem Inhalt zu positionieren (mit einem negativen Z-Index) und stattdessen den Inhalt über dem Bild zu positionieren (mit einem höheren Z-Index).

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

/* Above Fiddle contains sample CSS */ 

Ausgabe abgelegt: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9318580/