CSS blur filter not working on certain pseudo elements in MS Edge

Question

I'm using a blur filter on a pseudo element's background image. If the z-index of the pseudo element is -1, the blur has no effect in Microsoft Edge. It works without z-index. (You have to manually enable CSS filters via about:flags in Edge).

Here's the example: http://codepen.io/anon/pen/WrZJZY?editors=110

Is this 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 appears to be a limitation in our implementation. I'm filing an issue right now, and will have the appropriate team evaluate the repro as soon as possible. For now, the best option is likely to avoid positioning the image beneath the content (with a negative z-index), and instead position the content above 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/