Question

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

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

white box

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

好像问题与这一行有关：

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

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

编辑：重新打开此问题，因为修复程序无法解决我的问题。

在地图上显示-webkit-transform: translate3d(0,0,0); css时，白框已消失，但是出现了一个新问题：我的地图上出现了黑点并且路径无法正常渲染。

ugly paths

这也是Chrome中的错误，还是我可以通过这种方式解决这个问题？

SVG在Safari，FF，甚至是IE中都很好。

Answer 1

我已经看到，在最新版本的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;
}

这不是Raphael特有的问题，有时会发生CSS转换，jQuery和vanilla js。

Answer 2

我遇到字体问题 - 格栅边框，非常大我的解决方案是增强viewBox - 按因子10 - 然后公差变得非常小但价格是要考虑所有内容 - 10？