Raphael SVG：Chrome中的丑陋渲染

与Raphael.js一起在欧洲的一些小地图上工作。Raphael SVG：Chrome中的丑陋渲染

它在IE7 +，Safari，Firefox中正常工作。但是，在Chrome浏览器中，当在法国上空盘旋时，我的地图上出现一个白色框。它似乎是从哪里来的，它只发生在法国，当你在另一个国家悬停时它消失了。

white box

我图的是的jsfiddle这里;我仍然需要清理代码，但它的工作原理。

看来，如果该问题与此线做：

$c.css({ top: e.pageY, left: e.pageX}).fadeIn(500);

当我删除了“左”的设置，箱子不出来。当我将“左”放在50像素或50像素左右的空白处时，该框显得更小。看起来好像某件事情被法国方块推到了右边，但我似乎无法把它指向它。

编辑：重新打开这个问题，因为修复不能解决我的问题。

随着地图上的-webkit-transform: translate3d(0,0,0); css，白色框不见了，但是还有一个新问题：在我的地图上出现黑点，路径无法正确显示。

ugly paths

这是也是如此，在浏览器的错误还是可以解决这个问题的一种方式或其他？

SVG在Safari，FF甚至IE中呈现良好。

2012-09-14 cabaret

我已经更新了我的答案。 – Duopixel

我已经看到在Chrome动画的最新版本中偶尔会留下试验（我无法确切地确定），我解决这个问题的方式是迫使webkit使用gpu来缓存图像。您可以通过应用3D变换实现这一目标：

#map { 
    background: #f4f3f0; 
    width: 631px; 
    height: 686px; 
    -webkit-transform: translate3d(0,0,0); 
}

但由于-由于某种原因，我无法捉摸，这打乱了你的路，你可以实现与-webkit-backface-visibility: hidden;

同样的效果

#map { 
    background: #f4f3f0; 
    width: 631px; 
    height: 686px; 
    -webkit-backface-visibility: hidden; 
}

这是不特定于拉斐尔的一个问题，它有时会与CSS过渡，J发生查询和香草js。

2012-09-14 14:18:07 Duopixel

我希望看到我自己的替代解决方案，或者更好的解决问题的根本原因，所以不要让接受的答案让你失望。 – Duopixel

我有一个字体 - 格子边框的问题，当时很大我的解决方案是增强viewBox - 因子10 - 然后公差变得非常小但价格是因素所有内容 - 10？

2012-09-19 12:49:00 Mike

回答