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 にすると、ボックスがかなり小さく表示されます。何かがフランスのボックスによって右に押されているように見えますが、指を置くことはできません。

編集：修正しても問題が解決しないため、この質問を再開します。

マップ上の css により-webkit-transform: translate3d(0,0,0);、白いボックスはなくなりましたが、新しい問題があります。マップ全体に黒い点が表示され、パスが適切にレンダリングされません。

醜い道

これも 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