CSS transformed (rotated) text looks not anti-aliased in Chrome and Firefox (Windows)

Question

If I apply a rotation to a text, it will not render anti-aliased in Firefox and Chrome (only in Windows) but it renders correctly in IE. Also, it renders correctly in Chrome and Firefox in Mac OS X.

Here are screenshots comparing three browsers in my Windows 8:

http://d.pr/i/9qeg (Chrome)

http://d.pr/i/r8i0 (Firefox)

http://d.pr/i/crZ7 (IE10)

The CSS transformations for above is simply

transform: rotate(-1.5deg) translateY(-2px);

Here is a fiddle:

http://jsfiddle.net/sa6Nb/2/

Any ideas?

Answer 1

Updated Fiddle

transform: translate3d(0, 0, 0);

You can try using translate3d. As far as i know it triggers hardware acceleration for an elements rendering process. You can see the difference in the fiddle (at least in chrome)

Answer 2

Please add this code in your class:

.your-class{
   text-shadow:0px 0px 1px #fff;
}