I recently had to use the CSS3 property transform, in its « rotate » version. This property being currently supported by all modern browsers – but with vendor prefixes -, I thought it would be rendered the same anywhere.
It was not, not really.
In Chromium, -webkit-transform:rotate(4deg) on a container led to horribly aliased edges for this container. After some research, it appears that it was a WebKit engine bug, not solved for now. Tragedy! Horror! Pickles! Should my design be thrown away? No, don’t weep in sorrow: there is a way.
Others have the same problem:
http://stackoverflow.com/questions/5078186/webkit-transform-rotate-pixelated-images-in-chrome
And others know how to solve it:
http://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome
The key is backface-visibility: https://www.w3.org/TR/css-transforms-1/#backface-visibility-property It’s linked to 3D effects, and I must admit I don’t know why it corrects aliasing. I’ll search a little more 😉
