Raphael SVG: Ugly rendering in Chrome

Question

Working on some small map of Europe with Raphael.js.

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.

The JSFiddle of my map is here; I still need to clean up the code, but it works.

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

It seems as if the problem has to do with this line:

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

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.

EDIT: Reopening this question, as the fix doesn't fix my problem.

With the -webkit-transform: translate3d(0,0,0); 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.

Is this, too, a bug in Chrome or can I fix this one way or another?

The SVG renders fine in Safari, FF, even IE.

Answer 1

I've seen that in the latest versions of Chrome animation occasionally leaves trials (I can't pinpoint when exactly), the way I've fixed this is forcing webkit to use the gpu to cache the image. You achieve this by applying a 3d transformation:

#map {
    background: #f4f3f0;
    width: 631px;
    height: 686px; 
    -webkit-transform: translate3d(0,0,0);
}

http://jsfiddle.net/5s7dR/

But since—for some reason I can't fathom—this messes up your paths, you can achieve the same effect with -webkit-backface-visibility: hidden;

#map {
    background: #f4f3f0;
    width: 631px;
    height: 686px; 
    -webkit-backface-visibility: hidden;
}

http://jsfiddle.net/VaKvX/

This is not a problem specific to Raphael, it sometimes happens with CSS transitions, jQuery and vanilla js.

Answer 2

I had a problem with fonts - gridy border, when very large My solution was to enhance viewBox - by factor 10 - then the tolerances gets very small but the price is to factor all content - by 10 ?