Bug Tracker

Opened 14 years ago

Closed 12 years ago

Last modified 12 years ago

#4845 closed bug (duplicate)

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

Reported by: jeffkretz Owned by:
Priority: major Milestone: 1.4
Component: core Version: 1.3.2
Keywords: opacity Cc:
Blocked by: Blocking:


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

Attachments (1)

css.patch (824 bytes) - added by jeffkretz 14 years ago.

Download all attachments as: .zip

Change History (8)

Changed 14 years ago by jeffkretz

Attachment: css.patch added

comment:1 Changed 13 years ago by dmethvin

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

comment:2 Changed 13 years ago by 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.

comment:3 Changed 13 years ago by 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? ;)

comment:4 in reply to:  3 Changed 13 years ago by Baryn

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

This seems to have rendered in the comments strangely.

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

comment:5 Changed 13 years ago by 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.

comment:6 Changed 12 years ago by snover

Resolution: duplicate
Status: newclosed

comment:7 Changed 12 years ago by snover

Duplicate of #5676.

Note: See TracTickets for help on using tickets.