How to fix crispy text in Safari 5 Mac OS X after using css 3d transforms?

I've run into p开发者_如何学运维roblem when strange behavior is triggered on relative and absolute positioned elements after the element with css 3d transforms applied.

To fix this I have to set background color, but what if I need transparency?

Here is the minimum to reproduce the bug: http://jsfiddle.net/8VABq/3/

---

This is a weird bug indeed.

My first try involved specifying a transparent background color:

.crispy {
  position: relative;
  font-size:.9em;
  background: rgba(255,255,255,0);
}

However, this doesn't work. In fact, if you play with the alpha value (the zero) it seems to range from crispy (0) to normal (1).

Wrapping an inner div and specifying position static doesn't work either.

The only solution I found was this:

.crispy {
  position: relative;
  font-size:.9em;
  -webkit-font-smoothing: antialiased;
}

This, however, makes all your text slightly more blurry because it doesn't use the subpixel antialiasing available on LCD monitors. This may (or may not) be an acceptable workaround.

---

I am still experiencing this error in Safari 5.1. What worked for me is to set the font-smoothing myself. Subpixel antialiasing should be the default, but apparently it isn't. If I add the following to the element with broken font rendering, everything looks fine again:

-webkit-font-smoothing: subpixel-antialiased;

---

You have to hack around to figure out what switches to twiddle to get safari to turn off no-alias mode in transforms. In this case, if you get rid of webkit-perspective or set it to 0px, then the text is rendered non-crispy. You only need webkit-perspective if you'd doing 3D transforms AND actually using the 3rd dimension AND need it.