-webkit-transform rotate - Pixelated images in Chrome

Using -webkit-transform: rotate(-5deg); on a container div, Chrome renders the grid of images with really jagged edges. Whereas in FF (-moz-transform:) and IE (-ms-f开发者_Go百科ilter:) everything looks OK - see the difference below.

Is there any thing I can do about this?

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.

It appears to be an Antialiasing bug in the webkit engine. A report has been filed but is as yet unsolved.

You can try adding a border the same color as your background to try to minimise the effect.

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

Does the trick for chrome.

Have you tried the CSS rule -webkit-transform-style: preserve-3d;?

You could also try rotating the specific axis with -webkit-transform: rotateZ(-5deg);.

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.

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.

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/

This won't be appropriate for all uses, but where you have control over the markup and don't mind adding an extra <div>, you can make use of generated content to dramatically clean up the edges of rotated images in Chrome. This works because Chrome will apply anti-aliasing to the generated content placed over the image.

You can see an example here: http://jsfiddle.net/cherryflavourpez/2SKQW/2/

The first image has nothing done to it, the second has a border applied to match the background colour - not any difference that I can see.

The third image div has some generated content with a border placed around the edge. You lose a pixel around the edge, but it looks much better. The CSS is pretty self-explanatory. This has the advantage of not requiring you to create the border in your image, which seems like too big a price to me.

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.