javascript - Raphael SVG: Ugly rendering in Chrome - Stack Overflow

admin管理员组

文章数量:1434204

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 e 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.

/

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.

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 e 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/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.

• javascript
• google-chrome
• svg
• raphael

Share Improve this question Follow edited Sep 18, 2012 at 15:26 Joris Ooms asked Sep 14, 2012 at 11:55 Joris OomsJoris Ooms 12.1k1818 gold badges6969 silver badges124124 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5 +50

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/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/VaKvX/

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

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 ?

本文标签： javascriptRaphael SVG Ugly rendering in ChromeStack Overflow