Fading in an element in IE leaves the "filter" style set

[jeffkretz]

IE uses directx to render opacity with the filter property. When in use various weird side effects can be had, which inlcude:

1) ClearText AA disabled 2) Child Elements positioned outside the boundries of the parent are cut off.

A specific example is a suckerfish-style menu. If the parent element is faded in, and the child element is positioned to fly out to the right, the child element will be invisible in IE if the parent is set for filter:alpha(opacity=100).

This is an annoying problem with IE, but there is a simple workaround, which is to remove the filter attribute when it is set for 100%.

Then, test to see if there still is a filter property set (say, inherited from a stylesheet definition) and if so, re-set it for 100%.

I've been using this solution since jQuery 1.2.x, but the last time I submitted a ticket it wasn't well received. (​http://dev.jquery.com/ticket/3502) I'm trying this again -- hopefully the dev team can re-look over my solution.

I've downloaded the latest from SVN and created a patch file for the css.js source.

Thanks, Jeffrey Kretz

[dmethvin]

This looks like a good patch in that it does handle the case where a stylesheet filter has been applied.

[scottgonzalez]

This patch doesn't look like it handles the case where multiple filters are applied and we only want to remove the alpha filter.

[Baryn]

This still exists in 1.4.1 and I want to contribute, but for now, here is a workaround for anyone in a jam.

--

$(parentelem).css('filter', );

If you just want to cut out the alpha filter, you must do the text parsing of the existing filter values manually. That's the rough part though, isn't it? ;)

[Baryn]

$(parentelem).css('filter', );

This seems to have rendered in the comments strangely.

It should be this: $(parentelem).css('filter', "");

[jeffkretz]

This fix is only designed to handle directX boggles with IE that happen when the filter property is used for opacity.

Note that IE8 is quite buggy with the filter property, and things like hover states may fail to work. Since filter is the only solution in msie for opacity, it is important to remove it when it is no longer needed.

Every time I upgrade to the latest version of jQuery, I manually add this patch in and it solves a whole host of issues. I believe this is worthy of inclusion into the jQuery core.

[snover]

Duplicate of #5676.