Webkit 动画在其下方破坏 SVG答案

【问题标题】：Webkit Animation breaking SVG below itWebkit 动画在其下方破坏 SVG
【发布时间】：2012-11-09 14:58:23
【问题描述】：

我在jsfiddle做了一个示例页面

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

如果我关闭动画（删除-webkit-animation-name 位），条带消失，SVG 看起来应该（平滑）

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

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

【问题讨论】：

【解决方案1】：

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

除了turning off GPU acceleration，我能想到的唯一解决方法是通过 javascript 制作动画。希望有人能想出一些不那么痛苦的东西。

【讨论】：

【解决方案2】：

我找到了一个非常 hacky 的解决方法。

基本上你需要反复将宽度从原来的变为原来的负1像素，然后再变回来。

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

您可以在 this fiddle 看到它的实际效果。

请注意，虽然这是一个 hack，而不是真正的修复，但它确实解决了我遇到的 SVG 条带问题。

也许有人可以想出一个稍微不那么骇人听闻的解决方案？

【讨论】：