IE7 & IE8 calibri font blurry Sharepoint jQuery

Using jQuery in Sharepoint became a second nature to me. I was using a div with fadeIn(), nothing special and everything went well on our development environment and integration environment. Until we went to UAT and received lots of complains from users saying that the fonts look pixelated and blurry. I went down on site and saw that the fonts was indeed very blurry (especially true on their screens).

Bad news for me as I had a 7 level depth of div and span tags, not to mentioned it was in a webpart and Sharepoint corev4.css had this div.ms-WPBody that likes to screw my styles up.

After deep investigation, since safari, chrome and IE9 didn't had any blurry fonts, I downgraded my IE9 to IE8 and managed to replicate the issue. Hours past and I did a side-by-side comparison between chrome and IE8. Then I saw something within the top level div which I used the fadeIn() effect. div id="divContainer" style="filter: alpha bla bla bla,....."

It caught my attention and I used IE developer tools and went straight to the CSS tab and looked for the "filter". I turned it off by clicking on the checkbox. The fonts immediately sharpened. Hmm, http://blogs.msdn.com/b/e7/archive/2009/06/23/engineering-changes-to-cleartype-in-windows-7.aspx


So I've read up a lot and found out that jQuery might actually add in the filter somehow. I managed to solve it by putting:

document.getElementById('divContiner').style.removeAttribute('filter');

But I later found out that it only work for IE8. After some more frustrating hours, I discarded the fadeIn() effect and the fonts were sharp and crisp :)