Question

I found out that pulsate leaves jagged text behind when I use the pulsate effect of jQuery UI… after some searching it appears that it’s an IE bug… i think it may have something to do with the opacity, but i am unsure.

I tried the following but it doesn’t work:

  $(detail).effect("pulsate", { times: 1 }, 200, function(){
     $(this).removeAttr('opacity');
  });

Does anyone know of a work around? I searched here and found a similar problem with fadein and fadeout… the solution listed was to remove the filter attribute. But I tried this also and it didn’t seem to work. If I remove the style attribute then it works, but then I loose my positioning 🙂

Anyone had this issue?

And is it the same fix for pulsate as with fadein and fadeout, etc…? I must admit I don’t seem to get the issue with fadein and fadeout.

Pulsate is my problem, but it works perfectly in Firefox.

Answer 1

This is a well-known issue with Internet Explorer. It boils down to this: IE does not really have any built-in support for opacity on elements. jQuery tries to mask this by using "filters", an IE-specific feature wherein an element is rendered into an off-screen image and then that image is processed by a bit of plug-in code, with the final image inserted back into the page and rendered in (roughly) the same place as the original element. It… mostly works. But text is not anti-aliased when drawn onto that image.

Depending on which fonts you use, the results can range from merely ugly, to completely unreadable.

Please see:

• IE is losing ClearType
• JQuery toggle function rendering weird text in IE (losing ClearType?)