Why does the jQuery pulsate effect leave jagged text behind in IE?

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

Does it work if you let the opacity get very close to zero but never all the way to zero?

I'm beginning to wonder if IE people are going to start having a degraded visual experience due to these kinds of challenges. Developers might just save the good stuff for the browsers that don't make it so hard.

Answer 2

Is it really that important? I have to agree with Nosredna that if you stick to using IE, then you are going to have to accept quirky rendering like this.

Otherwise, what if you re-apply that style attribute that you removed, to get the positioning back? It sure is a hack, but if removing and re-applying styling to an element can force a redrawing or something.

Answer 3

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?)

Answer 4

Your solution was actually close. What you need to do is remove the 'filter' attribute, not the 'opacity' attribute:

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

This will restore your text after the pulsate completes.

FYI, this will happen with PNG images that have any areas of opacity < 100% as well. IE does not properly handle the compositing of these regions when opacity < 100%, which is probably also why clear-type rendering is disrupted.