Raphael SVG:Chrome中难看的渲染

Question

使用Raphael.js在欧洲的一些小地图上工作.

它在IE7 +,Safari,Firefox中运行良好.但是,在Chrome中,当悬停在法国时,我的地图上会出现一个白色的框.它似乎无处不在,它只发生在法国,当你盘旋在另一个国家时它会消失.

我的地图的JSFiddle就在这里; 我仍然需要清理代码,但它可以工作.

http://jsfiddle.net/ontolecabaret/ncyge/

似乎问题与此行有关:

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

当我删除"左"设置时,框不会显示.当我将'left'放在50px或50px左边缘时,该框看起来要小得多.看起来好像某种东西被法国盒子推到了右边,但我似乎无法将手指放在它上面.

编辑:重新打开这个问题,因为修复程序无法解决我的问题.

随着-webkit-transform: translate3d(0,0,0);地图上的CSS,白色框已经消失,但是有一个新问题:黑点出现在我的地图上,路径无法正确渲染.

这也是Chrome中的一个错误,还是我可以解决这个问题？

SVG在Safari,FF,甚至是IE中呈现得很好.

Answer 1

我已经看到在最新版本的Chrome动画中偶尔会留下试用版(我无法确切地指出),我修复此问题的方法是强制webkit使用gpu来缓存图像.您可以通过应用3d转换来实现此目的:

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

http://jsfiddle.net/5s7dR/

但由于某种原因我无法理解 - 这会弄乱你的道路,你可以达到同样的效果 -webkit-backface-visibility: hidden;

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

http://jsfiddle.net/VaKvX/

这不是拉斐尔特有的问题,它有时会发生在CSS转换,jQuery和vanilla js中.