CSS模糊过滤器不处理MS Edge中的某些伪元素

Question

我在伪元素的背景图片上使用模糊滤镜。如果伪元素的z-index为-1，则模糊在Microsoft Edge中无效。它没有z-index。 （您必须通过Edge中的about:flags手动启用CSS过滤器）。

以下是示例：http://codepen.io/anon/pen/WrZJZY?editors=110

这是由于实验支持（在Edge中）还是我在这里做错了什么？它适用于其他浏览器（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

这似乎是我们实施的限制。我现在正在提交一个问题，并会让相应的团队尽快评估这个问题。目前，最佳选择可能是避免将图像定位在内容下方（带有负z-index），而是将内容定位在图像上方（具有更高的z-index）。

小提琴：https://jsfiddle.net/jonathansampson/610arg2L/

/* Above Fiddle contains sample CSS */

提交问题：https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9318580/