Raphael SVG：Chromeで醜いレンダリング

Question

Raphael.jsでヨーロッパの小さな地図で作業しています。

IE7 +、Safari、Firefoxでうまく動作します。しかし、クロームでは、フランスの上にマウスを置くと、マップに白いボックスが表示されます。それはどこにもないように見えます、それはフランスでのみ起こり、あなたが別の国の上を動かすと消滅します。

私マップのJSFiddleはここにあります。私はまだコードをクリーンアップする必要がありますが、それは動作します。

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

問題は、この行に関係しているかのように思える：

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

私は「左」の設定を削除すると、ボックスは表示されません。 50pxまたは50px margin-leftに 'left'を置くと、ボックスのサイズがかなり小さくなります。何とか何とかフランスのボックスで何かが右に押されているように見えますが、私はそれに指を置くことはできません。

編集：この問題を再現しても問題は解決されません。

マップ上には、白いボックスが消えていますが、新しい問題があります。黒い点がマップ全体に表示され、パスが正しく表示されません。

は、あまりにも、これはChromeのバグまたは私はこの1つの方法または別のを修正できますか？

SVGはSafari、FF、さらにIEでレンダリングされます。

Answer 1

私は、Chromeアニメーションの最新バージョンでは時折試行が残っていることがわかりました（正確にはわかりません）。私がこれを修正した方法は、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の遷移で発生し、Jラファエルに特有の問題ではありませんクエリとバニラjs。

Answer 2

非常に大きいときにフォントに問題がありました 私の解決策は、viewBoxを10倍大きくすることでしたが、許容誤差は非常に小さくなりました 価格はすべてのコンテンツを10倍にすることですか？