CSS blur filter does not work on some pseudo elements in MS Edge

Question

I use a blur filter on the background image of the pseudo-element. If the z-index of a pseudo-element is -1, blurring has no effect in Microsoft Edge. It works without z-index. (You must manually enable CSS filters through about:flags in Edge).

Here is an example: http://codepen.io/anon/pen/WrZJZY?editors=110

Is it due to experimental support (in Edge), or am I doing something wrong here? It works in other browsers (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

This is apparently a limitation in our implementation. I am asking a question now, and you will have the appropriate team that will appreciate the reproduction as soon as possible. At the moment, the best option will probably not allow you to position the image under the content (with a negative z index) and instead place content over the image (with a higher z-index).

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

 /* Above Fiddle contains sample CSS */ 

Filed Issue: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9318580/