Firefox中的css模糊过滤器在剪切区域周围提供阴影。为什么？

Question

我正在尝试在图像中创建一个模糊区域，但由于某些原因，firefox在剪辑路径周围添加阴影时遇到了一些问题？

小提琴是here

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

请比较Chrome中的链接（看起来很棒）和firefox（有阴影问题）

由于

Answer 1

我在FF或Chrome中没有看到问题。

它们看起来与我相同（Larger Image）：