I'm currently working on adding a blurred effect to a specific area within an image, but I've encountered an unexpected problem in Firefox that adds a shadow around the clip path. Can anyone offer assistance?
For reference, here is the code on this Fiddle
CSS:
div {
position:absolute;
background:url(http://static.guim.co.uk/sys-images/Observer/Columnist/Columnists/2011/10/21/1319219972164/Oak-tree-in-field-007.jpg);
height:276px;
width:460px;
}
div:after {
background:inherit;
content:"";
width:inherit;
height:inherit;
position:inherit;
top:0px;
left:0px;
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'blur\'><feGaussianBlur stdDeviation=\'5\' /></filter></svg>#blur"); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5');
clip: rect(20px, 257px, 177px, 20px);
}
If you can, please test the link in both Chrome (where it looks good) and Firefox (which has the shadow problem).
Thank you.