Wonky text anti-aliasing when rotating with webkit-transform in Chrome

Try triggering the CSS 3d Transform mode with webkit. this changes the way chrome renders

-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);

edit

There also a Webkit only style declaration -webkit-font-smoothing which takes the values

• none
• subpixel-antialiased
• antialiased

where subpixel-antialiased is the default value.

Alas, the subpixel antialias is no good solution for rotated text. The rendering machine cant handle that. The 3d transform switches to just antialiased. But we can try to set it directly.

See here http://maxvoltar.com/archive/-webkit-font-smoothing