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

I believe this has something to do with the way Chrome is rendering the transform. The best way to see what I'm going to talk about is by going to chrome://flags/ and enabling Composited render layer borders. Now, go to the fiddle with a fix that you posted. You'll notice an orange border around several elements on the page. This border is there because it shows these elements are given their own layer when being rendered on the page.

Start tweaking the widths of the dt elements in your <dl class="easy-accordion"> using the Chrome inspector tool. The text will become blurry/clear depending on whether the width is even/odd. What appears to be happening here is the layer is being composited to a half-pixel location which is then being rendered to create the appearance of being "between" two pixels.

This is also the issue with Safari (and WebKit in general).

Check out http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome for more info.

Answer 2

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!

Answer 3

This problem occurs when a background color is not defined for IE versions 8 and 9 and maybe some versions of Chrome (I didn't see this issue in Chrome)

Adding background-color: white; (or any color you want) to your css rotate class solves the problem.

-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);
 background-color: white;         /* fix blurry text in ie8, 9 */

Answer 4

I had a similar issue, the problem was having perspective in body and the rotated div. It happened only in Safari on mac. Chrome worked fine.

body {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    font-family: 'Varela Round', sans-serif, Helvetica;
    transform-style: preserve-3d;//bad
    perspective: 1200px;//bad
    -webkit-text-size-adjust: none
}

removing the perspective from body saved me! Indeed I used perspective twice, in body and in another rotated div, which probably caused a hard to kill pixelations, even SVG and text were pixelated.

transform-style: preserve-3d;
perspective: 1200px;

removing the above styles from body saved me.