Problem with poor font rendering with CSS3 transitions, jQuery, & Google Fonts
- by Justin
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!
