CODEWITHSUNDEEP
csspseudo-elementmicrosoft-edgecss-filters
user
user

Reputation: 18529

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

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'); 
}

Upvotes: 7

Views: 5141

Answers (1)

Sampson
Sampson

Reputation: 268344

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/

enter image description here

/* Above Fiddle contains sample CSS */

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

Upvotes: 4

Related Questions