when scaling an element with css3 scale, it becomes pixelated until just after the animation is complete. I'm animating an element with a border

Question

http://jsfiddle.net/nicktheandroid/5Ytnj/

When I add -webkit-backface-visibility: hidden; to the .circ element, it causes it to stay pixelated even after the animation is complete.

I'm wondering if there's a way to get it to not pixelate while animating. I've viewing it in the dev version of Google Chrome.

Answer 1

Okay so i think i've come up with a work around;

essentially; don't use "scale". use "scale3d" and have it setup so that the largest you want the image is scale3d(1,1,1).

Here is an example with the circle thing you had in there. I changed the scale to 5, because i didn't want to put 0.222222222222222222222222222222222 into the scale3d func...

[edit] So i tried the jsfiddle demo again, on a computer with no hardware acceleration, and the pixelation effect was gone. So it seems that it's the same problem as with scale3d where it converts it into a texture and then scales it. you can do as in the circ3 div here.