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.

Jacobson

I've been having the same problem, except i'm having the problem with the scaling of a button with text inside it. It's a similar problem to what's mentioned here. Having the border doesn't matter, it happens with text too. – Tetrachloride

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.

Tetrachloride

Thank you, this solved my problem as well! Explicitly setting scale3d(1,1,1) for the starting state (i.e. CSS class), then using scale3d(1.5, 1.5, 1.5) for the transition class, did the trick. Should be the accepted answer. – Gasket

Doesn't made any difference for me, image is clear initially, pixelates throughout scaling with scale3d and clear after animation. – Schizogenesis

@Schizogenesis I'm fairly sure it's browser dependent, and also GPU dependent. You can change it in the various config bits for firefox, and in chrome you can add a command line argument to force / disable gpu acceleration. – Tetrachloride