javascript - Raphael SVG：Chrome 中的丑陋渲染

Question

使用 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 中呈现良好。

score 5 · Accepted Answer

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

score 1 · Accepted Answer

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

2 回答 2