CSS-Rotated text in Webkit browsers is blurred

Question

I've come across a severe problem I can't solve..

I created an accordion element with the jQuery Plugin easyAccordion.js. While I was developing and looked over it in Firefox it worked well - until I openend it in Chrome. There you can see that the rotated text is unclear and certainly blurred, even though it has the same formatting as the un-rotated text at the top. Same for Safari.

I created a jsfiddle that sortof recreates my issue (look at it in Chrome or Safari)

.

..

http://jsfiddle.net/SfKKv/427/

..

.

This is what I'm using to rotate the text:

  -webkit-transform: rotate(-90deg);  /* Chrome, Safari 3.1+ */
     -moz-transform: rotate(-90deg);  /* Firefox 3.5-15 */
      -ms-transform: rotate(-90deg);  /* IE 9 */
       -o-transform: rotate(-90deg);  /* Opera 10.50-12.00 */
          transform: rotate(-90deg);

The JSFiddle is not fully working in Firefox, but that's not important here, I have it working on the website I created it in, but even the sortof broken Fiddle in FIrefox shows that it can display the rotated text a lot better.

I've found some hints towards font-smoothing and some 3d Parameters, but none seemed to work for me.

Can anyone help me with this issue?

Answer 1

OK, so after trying out some uncommon things I've found a fix that is not 100% perfect/accurate but good enough for me.

Here's the updated JS Fiddle, again, use it in Chrome or Safari. Use the red Hover box to see the magic in action.

http://jsfiddle.net/SfKKv/627/

All I do is change the -webkit-transform-origin from its default value (50% 50%) to something close enough such as

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

When you try out the fiddle, you'll see it moving by that one percent. However, that's still better than the blurred text.

I found this by pure trial and error and I still don't know why the text suddenly turns sharp. If someone can explain me this behavior, let me know!