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

Question

There are no problems in Firefox. Here is the image:

http://cl.ly/3R0L1q3P1r11040e3T1i

Safari doesn't display text well:

http://cl.ly/0a1101341r2E1D2d1W46

In IE7 and IE8, this is much worse, but I do not have a picture. Sorry:(

I am using the Isotope jQuery plugin and CSS3 transitions seem to cause poor font rendering.

I also use the Google font API.

Here, the CSS transitions for the 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 in a minute, you can add the -webkit-font-smoothing property to your .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 be related to the support of three-dimensional transitions. The isotope automatically detects 3D transition support using Modernizr and uses "translate3d" instead of "translate". I really want:

 -webkit-font-smoothing: subpixel-antialiased 

But this only works in Chrome and returns Safari as before. To be clear, Chrome does not exhibit a smoothing problem, but follows the style definitions above.

I’m considering changing the source of the isotope so that it only adds this font smoothing definition to browsers that support 3D transforms (like Safari) and leaves only Chrome.

Answer 2

Unfortunately, you really can't do anything. This is due to the alpha filters that IE uses to create opacity, and I have never seen a fix for it.