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