title: Raphael SVG: Ugly rendering in Chrome
body: <p>Working on some small map of Europe with Raphael.js.</p>
  
  <p>It works fine in IE7+, Safari, Firefox. However, in Chrome, when hovering over France a white box shows up on my map. It seems to come out of nowhere, it only happens with France and it disappears when you hover over another country.</p>
  
  <p><img src="https://i.stack.imgur.com/hpLFa.png" alt="white box"></p>
  
  <p>The JSFiddle of my map is here; I still need to clean up the code, but it works.</p>
  
  <p><a href="http://jsfiddle.net/ontolecabaret/ncyge/" rel="nofollow noreferrer">http://jsfiddle.net/ontolecabaret/ncyge/</a></p>
  
  <p>It seems as if the problem has to do with this line:</p>
  
  <pre><code>$c.css({ top: e.pageY, left: e.pageX}).fadeIn(500);
  </code></pre>
  
  <p>When I remove the 'left' setting, the box doesn't show up. When I put 'left' at 50px, or 50px margin-left, the box appears a lot smaller. It seems as if something somehow gets pushed to the right by the France box, but I can't seem to put my finger on it.</p>
  
  <p><strong>EDIT: Reopening this question, as the fix doesn't fix my problem.</strong></p>
  
  <p>With the <code>-webkit-transform: translate3d(0,0,0);</code> css on the map, the white box is gone, but there's a new problem: black dots showing up all over my map and the paths don't render properly.</p>
  
  <p><img src="https://i.stack.imgur.com/LZgcp.png" alt="ugly paths"></p>
  
  <p>Is this, too, a bug in Chrome or can I fix this one way or another?</p>
  
  <p>The SVG renders fine in Safari, FF, even IE.</p>