css - Blurry text on transform:rotate in Chrome

Question

I'm building a website with a wrapper div that is rotated (transform:rotate(10deg)). The text inside the div also rotates. I want the text straight, so I rotate it back (transform:rotate(-10deg)). The text is straight again, but this causes blurry text in Chrome (latest version, mac). I tried:

-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);
-webkit-backface-visibility: hidden;
-webkit-font-smoothing: antialiased; (and other)
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateZ(0deg);

It al didn't didn't solve the problem..

JSFiddle: http://jsfiddle.net/D69d4/10/

The weird thing is: it works perfectly in the jsfiddle.. But not on the actual website. When I add -webkit-backface-visibility: hidden; inside my style, the blurry text in Safari turns out sharp again, but in Chrome there is no difference. (I almost think it is making it worse in Chrome) (FF works fine)

I hope someone can help me with this, or give me a explanation what is going wrong.

Answer 1

It happens in Webkit browsers such as Chrome and Safari. Try adding:

-webkit-transform-origin: 50%  51%;

and you would be fine.