Css 它下面的Webkit动画

我在网站上做了一个例子

如果我在

#dog

元素上启用

sway

动画并滚动页面，我会在SVG上看到大量条带

如果我关闭动画（删除

-webkit动画名称

位），则带状会消失，SVG看起来应该（平滑）

有人知道是什么导致了这个问题吗？有办法解决吗

---

我只在Webkit浏览器（Chrome、Canary，都在OSX上）中尝试过。

似乎动画触发了GPU，GPU渲染渐变效果很差，只需在

#test

上应用

translate3d（0,0,0）

即可重现该错误

除此之外，我能想到的唯一解决办法就是通过javascript制作动画。希望有人能想出一些不那么痛苦的办法。

我找到了一个非常棘手的解决办法

基本上，您需要重复地将宽度从原始更改为原始的负1像素，然后再更改回来

if($("#svgtest").css('width')=='15500px') {
    $("#svgtest").css('width','14499px');
} else {
    $("#svgtest").css('width','15500px');
}

你可以看到它的行动在

请注意，这是一个黑客攻击，不是真正的修复，但它确实解决了我所遇到的SVG绑定问题

---

也许有人能想出一个稍微不那么粗俗的解决方案来解决这个问题？

-webkit前缀css属性通常在其他浏览器中不起作用