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

CSS3 scale() causes divs to become pixelated

The solution is to start your center circle as big as it needs to be, then scale it down as the reference starting point.

Then, on the hover event you scale up to 1, which will preserve the unpixelated center circle.

Reference: jsFiddle

Note other settings such as positioning are done due to compensate for these changes.

Status Update:

Consider instead of using border-radius to make circle, use ASCII Character of circle or outline
circle:

• ○ ☺ ☻ ☼

Reference: jsFiddle (Note positions are not calibrated.)

The above characters are essentially TEXT, hence use ANY CSS2 or CCS3 text or font property!

As certain characters become really big they do pixelate so use "reverse scale" method for these characters as previously answered but note, at least in Firefox, the transitions become expensive when super large fonts are used. Works best with medium to large fonts.

Tip: This ASCII based method may need the width and height properties for positioning to be realized correctly, so use that if positioning seems broken.

WebKit: Blurry text with css scale + translate3d

Webkit treats 3d transformed elements as textures instead of vectors in order to provide hardware 3d acceleration. The only solution to this would be to increase the size of the text and downscaling the element, in essence creating a higher res texture.

See here:
http://jsfiddle.net/SfKKv/

Note that antialiasing is still underpar (stems are lost) so I'm beefing up the text with a bit of text shadow.

Related Topics