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

Posted by Justin on Stack Overflow See other posts from Stack Overflow or by Justin
Published on 2011-02-27T23:05:08Z Indexed on 2011/02/27 23:24 UTC
Read the original article Hit count: 252

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!

© Stack Overflow or respective owner

Related posts about internet-explorer

Related posts about fonts