javascript - 拉斐尔 SVG : Ugly rendering in Chrome

Question

使用 Raphael.js 绘制欧洲的一些小 map 。

它在 IE7+、Safari、Firefox 中运行良好。但是，在 Chrome 中，当鼠标悬停在法国上空时，我的 map 上会出现一个白框。它似乎不知从何而来，它只发生在法国，当你将鼠标悬停在另一个国家时它就会消失。

我的 map 的 JSFiddle 在这里；我仍然需要清理代码，但它有效。

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

问题似乎与这一行有关:

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

当我删除“左”设置时，该框不显示。当我将“左”放在 50px 或 50px margin-left 时，框看起来小了很多。似乎有什么东西被法国框推到了右边，但我似乎无法将手指放在上面。

编辑:重新打开这个问题，因为修复没有解决我的问题。

有了 -webkit-transform: translate3d(0,0,0); map 上的 css，白框不见了，但是有一个新问题:黑点出现在我的身上 map 和路径无法正确呈现。

这也是 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/

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