-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

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.

Answer 2

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

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

Answer 3

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.