css模糊过滤器'；s边在translateY过渡期间变为实心

我有一个带有

-webkit过滤器的元素：blur（10px）应用于它。我正在使用CSS动画来使用元素的translateY属性上下移动元素。当元素正在设置动画或转换时，模糊仍然存在，但边缘变硬。当动画或过渡结束时，边会像预期的那样再次变得模糊。我做了一个演示，展示了它后面的注释示例

演示：

我试着用：


添加
-webkit字体平滑：亚像素抗锯齿到动画元素

在动画元素上强制硬件加速，并在父元素上添加
backface visibility:hidden

值得注意的事情


发生在CSS转换和动画中
如果通过CSS top属性上下移动元素，模糊过滤器将正确渲染

浏览器测试


谷歌Chrome（运行版本50.0.2661.86（64位））和金丝雀中都出现了该漏洞

Firefox和Safari（iOS和桌面）都能在动画中正确渲染模糊过滤器


我真的希望能够使用translateY transition属性而不是top属性运行动画。如果真的没有解决方法，那么了解到底是什么导致了问题还是很有意思的

提前感谢您在这方面的帮助。
这可能是硬件加速造成的问题-GPU只是移动原始模糊内容，而没有更新其背景

要解决这个问题，不要使用translate或使用其他技巧来禁用硬件加速（例如同时设置边距或填充动画）
这不是一个解决方案，但它已经在50年前开始出现。在49行吗