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

css transform scale css-transitions pixelate
android.nick picture android.nick · Apr 3, 2012 · Viewed 18.1k times · Source

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

will picture will · May 1, 2012

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.

Related questions

Using transform: scale results in blurry images

In our catalog view (online store) we use javascript to get different views of the products and scale the images down with CSS. 3 in a row / 4 or 5/ The default view is 4: -webkit-transform: scale(0.83); -moz-transform: scale(0.83); -ms-transform: scale(0.83); -o-transform: scale(0.83); transform: …

Read More
CSS: Wrong position of "transform: scale();" container children

I have a container element with long content which is scaled: .container { transform: scale(0.9); } inside this container I have a child div which is used to be a popup. It's positioned absolute with top 50% .popup { width: 300px; height: 200px; position: …

Read More
Can I use Calc inside Transform:Scale function in CSS?

I'm trying to calculate the right scale to apply to children inside a parent but i can't use calc() inside transform: scale CSS function. I've done this function with javascript but i'm interested in a pure CSS solution to avoid …

Read More