css3 - CSS blur filter not working on certain pseudo elements in MS Edge -
i'm using blur filter on pseudo element's background image. if z-index of pseudo element -1, blur has no effect in microsoft edge. works without z-index. (you have manually enable css filters via about:flags
in edge).
here's example: http://codepen.io/anon/pen/wrzjzy?editors=110
is due experimental support (in edge) or doing wrong here ? 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'); }
this appears limitation in our implementation. i'm filing issue right now, , have appropriate team evaluate repro possible. now, best option avoid positioning image beneath content (with negative z-index), , instead position content above image (with higher z-index).
fiddle: https://jsfiddle.net/jonathansampson/610arg2l/
/* above fiddle contains sample css */
Comments
Post a Comment