Raphael.js を使用してヨーロッパの小さな地図を作成しています。
IE7+、Safari、Firefox で正常に動作します。ただし、Chrome では、フランスにカーソルを合わせると、マップに白いボックスが表示されます。それはどこからともなく現れたようで、フランスでのみ発生し、別の国にカーソルを合わせると消えます。
私のマップの JSFiddle はここにあります。まだコードをクリーンアップする必要がありますが、機能します。
http://jsfiddle.net/ontolecabaret/ncyge/
問題は次の行に関係しているようです。
$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 でも正常にレンダリングされます。