How do I fix edgy text in FireFox from JQuery’s fadeIn() & fadeOut?

If you are noticing a problem with text appearing light, crunchy or edgy in FireFox while fading in and out, you’ve found the cleartype bug! You’ll have to remove the filter property from the DOM. Try this:

document.getElementById("#container").style.removeAttribute("filter");

You’ll have to use after the fadeIn function is complete or in the function callback as follows:

$("#container").fadeIn(  function() {
    this.style.removeAttribute( "filter" );
});

Back to Blog