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

Question

I've run into problem 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/

Answer 1

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.

Answer 2

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;