css - Webkit Animation 在其下方打破 SVG

Question

我在 jsfiddle 做了一个示例页面

如果我在 #dog 元素上启用 sway 动画并滚动页面，我会在 SVG 上看到大量 strip 。

如果我关闭动画(删除 -webkit-animation-name 位)， strip 消失，SVG 看起来应该(平滑)

有谁知道导致这个问题的原因吗？有什么办法可以解决吗？

我只在 Webkit 浏览器中尝试过(Chrome、Canary，都在 OSX 上)

Answer 1

似乎动画触发了渲染渐变的 GPU，只需在 #test 上应用 translate3d(0,0,0) 即可重现该错误. http://jsfiddle.net/LKmbN/

禁止 turning off GPU acceleration我能想到的唯一解决方法是通过 javascript 制作动画。希望有人能想出一些不那么痛苦的事情。