Javascript 过渡与背景过滤器一起工作吗？

如果我在父元素上使用

溢出：隐藏

，CSS

转换

在

背景过滤器

上不起作用

示例代码：

。图像包装器{
宽度：200px；
边界半径：6px；
位置：相对位置；
}
.覆盖{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景滤镜：模糊（0px）；
过渡时间：.5s；
}
.image包装器：悬停.overlay{
背景滤镜：模糊（15px）；
}
.图像包装器img{
最大宽度：100%；
高度：自动；
}

//溢出：隐藏（转换不工作）
//溢出：可见

出于几个原因，我建议简化代码，如下所示。我相信它做的事情和你想要的一样，而且更兼容跨浏览器——因为Firefox目前不支持背景过滤

。图像包装器{
宽度：200px；
边界半径：6px；
位置：相对位置；
}
.图像包装器img{
最大宽度：100%；
高度：自动；
过滤器：模糊（0）；
过渡时间：.5s；
}
.图像包装器img：悬停{
滤镜：模糊（15px）；
}

//溢出：隐藏（转换正在工作）
//溢出：可见
真正的罪魁祸首似乎是
边界半径

听起来像是一个bug，但我找不到（尽管有很多相关的bug，因为整个后台过滤器功能在实现和规范中仍然充满bug），所以您可能希望直接将其报告给

请注意，解决方法是使用剪辑路径而不是此边界半径：


。图像包装器{
宽度：200px；
位置：相对位置；
线高：0
}
.夹我{
剪辑路径：插入（0px 0px圆形6px 6px）；
}
.覆盖{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景滤镜：模糊（0px）；
过渡时间：.5s；
}
.image包装器：悬停.overlay{
背景滤镜：模糊（15px）；
}
.图像包装器img{
最大宽度：100%；
高度：自动；
}
//溢出：隐藏（转换工作，但溢出现在无效）
//溢出：可见