SVG image / shape scaled up is blurry on transition

Question

On Chrome, MacOs, I have this issue with SVG images and transition : when the graphic is animating, it becomes blurry .

On a project, it only happens on retina screens, but I did a jsfiddle that reproduce this issue : http://jsfiddle.net/0c2x7LaL/

<svg height="100" width="100" id="circle">
 <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

#circle {
 transform: scale(1);
    transition: transform 2s ease;
}
#circle:hover {
    transform: scale(10);
}

It doesn't blur on Firefox, just on Chrome... Any idea ?

Updated JSFiddle

(with translateZ(0) and backface-visibility, still the same)

http://jsfiddle.net/0c2x7LaL/1/

Answer 1

When doing CSS animations Chrome seems to use the original size raster during the transitions.

One solution is to use SVG animations instead.

<svg height="1000" width="1000" id="circle">
  <circle cx="500" cy="500" r="40" stroke="black" stroke-width="3" fill="red">
    <animate fill="freeze" dur="2s" to="400" from="40" 
                  attributeName="r" begin="mouseover"/>
    <animate fill="freeze" dur="2s" to="40" from="400"
                  attributeName="r" begin="mouseout"/>
  </circle>
</svg>

Demo fiddle

If you want to stick with CSS animations, another solution would be to make the large size the "original". Then reverse the scaling operations.

#circle {
    transform: scale(0.1);
    transition: transform 2s ease;
}
#circle:hover {
    transform: scale(1);
}

Demo fiddle

Whether this is workable for you depends on your circumstances.

Answer 2

Instead of using CSS transform: scale(); , I just converted it to width .

In this case (img with SVG) :

img {
    width: 300px;
    transition: width 2s ease;
}
img:hover {
    width: 10000px;
}

DEMO : http://jsfiddle.net/0c2x7LaL/4/