CSS rotation and text distortion

Question

Creating a spreadsheet-style view and rotating the column causes the text to distort in Chrome + Firefox. I've managed to work around the Chrome issue using:

-webkit-backface-visibility: hidden;

However I'm left with Firefox looking like this :

Chrome (with fix)

Oddly IE 10 renders this perfectly - and Mac browsers do a better job too.

Any suggestions greatly appreciated

Answer 1

As of Firefox v16, Mozilla implements the unprefixed backface-visibility property, which might work for you:

-webkit-backface-visibility: hidden;    
        backface-visibility: hidden;

IE10 will pick this up as well.

More information on the MDN backface-visibility