3

我在jsfiddle做了一个示例页面

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

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

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

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

4

2 回答 2

2

好像是动画触发了GPU渲染梯度很差，这个bug可以通过简单的应用来translate3d(0,0,0)重现#test。http://jsfiddle.net/LKmbN/

除非关闭 GPU 加速，我能想到的唯一解决方法是通过 javascript 制作动画。希望有人能想出一些不那么痛苦的事情。

于 2012-11-22T06:34:04.800 回答
0

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

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

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

你可以在这个 fiddle看到它的作用。

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

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

于 2012-11-26T09:31:27.783 回答