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/

enter image description here

/* above fiddle contains sample css */ 

Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -