Raphael SVG：Chrome 中的丑陋渲染答案

【问题标题】：Raphael SVG: Ugly rendering in ChromeRaphael SVG：Chrome 中的丑陋渲染
【发布时间】：2012-09-07 14:09:51
【问题描述】：

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

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

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

问题似乎与这一行有关：

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

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

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

使用地图上的-webkit-transform: translate3d(0,0,0); css，白框消失了，但出现了一个新问题：我的地图上到处都是黑点，并且路径无法正确渲染。

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

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

【问题讨论】：

【解决方案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 中。

【讨论】：

【解决方案2】：

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

【讨论】：