-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

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.