Side navigation
#4845 closed bug (duplicate)
Opened July 02, 2009 10:22PM UTC
Closed November 19, 2010 10:30AM UTC
Last modified November 19, 2010 10:30AM UTC
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: |
Description
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)
Change History (7)
Changed October 02, 2009 01:52AM UTC by comment:1
Changed October 02, 2009 12:44PM UTC by comment:2
This patch doesn't look like it handles the case where multiple filters are applied and we only want to remove the alpha filter.
Changed February 05, 2010 05:16PM UTC by comment:3
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? ;)
Changed February 05, 2010 05:17PM UTC by comment:4
$(parentelem).css('filter', '');
This seems to have rendered in the comments strangely.
It should be this: $(parentelem).css('filter', "");
Changed March 31, 2010 06:34PM UTC by comment:5
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.
Changed November 19, 2010 10:30AM UTC by comment:6
| resolution: | → duplicate |
|---|---|
| status: | new → closed |
This looks like a good patch in that it does handle the case where a stylesheet filter has been applied.