-webkit-transform rotate - Pixelated images in Chrome

Question

Using -webkit-transform: rotate(-5deg); on a container div, Chrome renders the grid of images with really jagged edges. Whereas in FF (-moz-transform:

Answer 1

You could check out the answer to the question css transform, jagged edges in chrome

Helped me out

From the accepted answer:

In case anyone's searching for this later on, a nice trick to get rid of those jagged edges on CSS transformations in Chrome is to add the CSS property -webkit-backface-visibility with a value of hidden. In my own tests, this has completely smoothed them out. Hope that helps.

Answer 2

I encountered this issue on Chrome 33 (Windows 7). I tried all the suggested fixes on this page. Misery ensued. My rotation was pretty simple:

transform: rotate(40deg);
-moz-transform: rotate(40deg);
-webkit-transform: rotate(40deg);

I found this answer and after some quick experimentation I found that the following combination works perfectly in Chrome:

-webkit-backface-visibility: hidden;
outline: 1px solid transparent;

I haven't tested cross browser yet. I have no idea which further bugs this introduces. You have been warned. Hope this points someone in the right direction.

---

Side note: During my experiments I found that -webkit-backface-visibility: hidden; (on its own) removed the antialiasing from untransformed images.

Answer 3

-webkit-transform: rotate(-5deg) translate3d( 0, 0, 0);

Does the trick for chrome.

Answer 4

For me it was the perspective CSS property that did the trick:

-webkit-perspective: 1000;

Completely illogical in my case as I use no 3d transitions, but works nonetheless.

Answer 5

You can add box-shadow to your images with the same color as your background, that reduce the effect.

example: http://antialiasing-webkit.qip.li/edit/

Answer 6

This is a WebKit bug that has been already fixed and the fix shall appear in Chrome 15.

The workaround until everyone updates to 15+ is to apply -webkit-backface-visibility: hidden; to the element being rotated. Worked for me. That triggers antialiasing on the element.