Css3 Scale() Causes Divs to Become Pixelated

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.

CSS3 transform scale() does pixelate some elements

As said in the edit of the question:

I know the cause of the blur:

If in Webkit an Element is scaled and then ends up over a <canvas> tag, it gets blured/pixelated! Dont know exactly why, but will send a bug notice to Webkit Dev Team.

Thanks for helping anyway :-)

How to fix blurry Image on transform scale

Try this, it's work fine for me!

img {
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
}

CSS transition effect makes image blurry / moves image 1px, in Chrome?

2020 update

• If you have issues with blurry images, be sure to check answers from below as well, especially the image-rendering CSS property.
• For best practice accessibility and SEO wise you could replace the background image with an <img> tag using object-fit CSS property.

---

Original answer

Try this in your CSS:

.your-class-name {
    /* ... */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
}

What this does is it makes the division to behave "more 2D".

• Backface is drawn as a default to allow flipping things with rotate
  and such. There's no need to that if you only move left, right, up, down, scale or rotate (counter-)clockwise.
• Translate Z-axis to always have a zero value.
• Chrome now handles backface-visibility and transform without the -webkit- prefix. I currently don't know how this affects other browsers rendering (FF, IE), so use the non-prefixed versions with caution.

---

Related Topics