Problem with poor font rendering with CSS3 transitions, jQuery, & Google Fonts

Question

In Firefox, there is no problem. Here's an image:

http://cl.ly/3R0L1q3P1r11040e3T1i

In Safari, the text is rendering poorly:

http://cl.ly/0a1101341r2E1D2d1W46

In IE7 & IE8, it's much worse, but I don't have a picture. Sorry :(

I'm using Isotope jQuery plugin, and the CSS3 transitions seem to cause the poor font-rendering.

I'm also using Google Font API.

Here's what the CSS transitions for Isotope are written as:

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}

.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}

.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}

I appreciate any help with this. Looks great in Firefox!

Thanks!

Answer 1

Forgetting IE for a minute, you can add the -webkit-font-smoothing property to the .isotope-item style definition. Like this:

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  transition-property: transform, opacity;
  -webkit-font-smoothing: antialiased
}

The reason seems to have something to do with supporting 3d transitions. Isotope automatically detects support for 3d transitions using Modernizr and uses "translate3d" instead of "translate". What I really want is:

-webkit-font-smoothing: subpixel-antialiased

But that only seems to work in Chrome and puts Safari back the way it looked before. To be clear, Chrome doesn't exhibit the anti-aliasing problem but does respect the style definitions above.

I'm considering modifying the source of isotope so that it only adds this font smoothing definition to browsers supporting 3D transforms (ie. Safari) and leaves Chrome alone.

Answer 2

Unfortunately, there's not really anything you can do. It has to do with the alpha filters that IE uses to create opacity and I've never seen a fix for it.