硬件加速时在Chrome中剪裁时CSS模糊渲染不正确

我对Chrome上的

filter:blur（）

有问题。我使用了

transform:translate3d（0，0，0）

来鼓励硬件加速，它大大提高了性能（我很少使用它）。我有一个元素，我把它的

设置为背景图像和模糊。我已将其范围设置为超出其包含元素的边界


上面是Chrome的屏幕截图。硬件加速版在左侧，而非硬件加速版在右侧。请注意，在左侧，模糊显示为插入软边

在Chrome中，当硬件加速时，元素在模糊之前会被溢出物夹住，导致羽状边缘

除了禁用硬件加速（这会降低这种大半径模糊的性能）之外，还有什么方法可以鼓励Chrome在剪切之前执行模糊

我在下面附上了一个示例测试用例

谢谢

div{
宽度：200px；
高度：200px；
位置：绝对位置；
框大小：边框框；
溢出：隐藏；
边框：2倍纯红；
}
div：：之前{
背景图片：url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1024px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg);
内容：“；
显示：块；
位置：绝对位置；
左：-200px；
顶部：-200px；
宽度：计算（100%+400px）；
高度：计算（100%+400px）；
背景尺寸：钙（100%+400px）钙（100%+400px）；
过滤器：模糊（60px）；
-webkit过滤器：模糊（60px）；
z指数：1；
}
#不正确：：之前{
-webkit转换：translate3d（0,0,0）；
-ms变换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
}
#不正确{
左：100px；
顶部：100px；
}
#正确的{
右：100px；
顶部：100px；
}
您可以尝试将
#error:：before
上的最后一个属性“translation-value-z”设置为1。我不知道确切的原因，但它似乎起了作用

Translation-value-z是第三个向量值，定义
z轴方向上的平移（三维）。注意:
它只能是长度值，不支持百分比

有关更多信息：


div{
宽度：200px；
高度：200px；
位置：绝对位置；
框大小：边框框；
溢出：隐藏；
边框：2倍纯红；
}
div：：之前{
背景图片：url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1024px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg);
内容：“；
显示：块；
位置：绝对位置；
左：-200px；
顶部：-200px；
宽度：计算（100%+400px）；
高度：计算（100%+400px）；
背景尺寸：钙（100%+400px）钙（100%+400px）；
过滤器：模糊（60px）；
-webkit过滤器：模糊（60px）；
z指数：1；
}
#不正确：：之前{
-webkit转换：translate3d（0,0,1）；
-ms变换：translate3d（0,0,1）；
变换：translate3d（0,0,1）；
}
#不正确{
左：100px；
顶部：100px；
}
#正确的{
右：100px；
顶部：100px；
}

将
变换
移动到
#不正确的
似乎可以解决问题，但它是硬件加速的吗？实际结果不同这一事实非常有趣。