在translateY过渡期间，css模糊滤镜的边缘变为实心

Question

我有一个应用了-webkit-filter: blur(10px);的元素。我正在使用CSS动画来使用它的translateY属性上下移动元素。当元素动画或过渡时，模糊仍然存在但边缘变硬。当动画或过渡结束时，边缘会像他们想象的那样再次变得模糊。我做了一个演示，演示了它后面的注释示例。

演示：http://jsbin.com/bofahekuko/1/edit?html,css,output

我试过修复它：

• 将-webkit-font-smoothing: subpixel-antialiased;添加到动画元素。
• 强制动画元素上的硬件加速并在父
上添加backface-visibility: hidden

注意事项

• 同时发生CSS过渡和动画
• 如果您通过CSS top属性向上和向下移动元素，则模糊滤镜会正确渲染。

浏览器测试

• Google Chrome（运行版本50.0.2661.86（64位））以及Canary中都会显示错误。

• Firefox和Safari（iOS和桌面）都可以在动画期间正确渲染模糊滤镜。

我真的希望能够使用translateY过渡属性而不是top属性来运行动画。如果确实没有修复，那么知道究竟是什么导致这个问题仍然很有趣。

提前感谢您提供任何帮助。

Answer 1

这是一个可能由硬件加速导致引起的问题 - GPU只是移动原始模糊内容而不更新其背景。

要修复，请不要使用翻译或使用其他技巧来禁用硬件加速（例如同时设置边距或填充动画）