Remove filter:alpha(opacity=100) after animation

[Avorin]

Internet Explorer renders some strange things(font, some backgrounds etc.) when filter: alpha(opacity=100) is applied(i.e. if opacity is animated to 1).

I have written a fix for that:

insert at Line 4603

if( style.filter === "alpha(opacity=100)" ) {

style.filter = "";

}

that removes the filter if the value is 100.

[dmethvin]

See #3238 and #3502 for background.

[snover]

#7400 is a duplicate of this ticket.

[snover]

#3230 is a duplicate of this ticket.

[snover]

#4779 is a duplicate of this ticket.

[snover]

#3901 is a duplicate of this ticket.

[snover]

#5676 is a duplicate of this ticket.

[snover]

As touched upon in #6841, it is important that the filter only be removed if there is no existing filter in any stylesheets that will cascade and cause the opacity to reset back to where it was before.

[jitter]

#7932 is a duplicate of this ticket.

[john]

Let's consider this for 1.7.

[Steven <jquery.good@…>]

Note that in order to solve some bugs, the filter attribute should be removed completely, instead of set to an empty value.

Here is the jsFiddle containing the complete "plugin" that I include on all my sites to fix a clear type issue in IE7: ​http://jsfiddle.net/gWFx4/4/ - it removes the filter field if it is either empty or only has alpha(opacity=100)

[scottgonzalez]

blocking jQuery UI bug ​http://bugs.jqueryui.com/ticket/4621

[john]

Nominating ticket for 1.7 discussion.

[Rick Waldron]

+0, Scott proposed a better approach

[Rick Waldron]

My comments above may be mistaken, apparently _this_ was on the proposals list but scott also re-proposed it

[jaubourg]

-1, No matter what you do in the end, you'll have this strange rendering during the animation anyway, so I see little value in this.

[timmywil]

+1, If we can figure out a way to do this without presenting bugs, I think it is needed.

[paul.irish]

+1, look at all the dupes of this one. people hit this guy often, let's help 'em out

[dmethvin]

+1, The nay is that stylesheet-imposed filters will then take effect but I agree with paul_irish that this is too common to ignore.

[john]

+0, This will allow the stylesheet filters to override the element (potentially making it hidden or partially visible) which seems unintended. While I agree that it looks bad in its end state and should look better, I'm not sure if the solution is really that good.

[anonymous]

Maybe we could add some sort of flag, like

jQuery.flags.restoreClearType = true

or something like this and then use it in the cssHook like that: ​http://jsfiddle.net/VCb5r/1/ (last "if")

so that users can enable this, when they know what this implies. Also this way it could be disabled by default, so Backwards Compat does not get lost.

[ajpiano]

+1, but anonymous's idea above of allowing users to opt-in or out is a good one

[jzaefferer]

+1

[gnarf]

I'd be willing to try and tackle this one during the 1.7 phase if you guys want to assign it to me.

[gnarf]

​https://github.com/jquery/jquery/pull/416 - This is what I managed to come up with after trying a few things that didn't work...

Setting filter to an empty string still causes the cleartype issues.

[gnarf]

​http://jsfiddle.net/9rXBV/9/ - This is the fiddle I was using to test the fix

[whittet]

Replying to gnarf:

​http://jsfiddle.net/9rXBV/9/ - This is the fiddle I was using to test the fix

I am able to reproduce this using alpha(opacity=70); ZOOM: 1. Does your solution handle that use case?

[gnarf]

Replying to whittet:

I am able to reproduce this using alpha(opacity=70); ZOOM: 1. Does your solution handle that use case?

If you apply the alpha filter, ClearType will be removed... If it CAN remove the "filter" it does, if it can't (because there is already a filter in the CSS property) there is NOTHING we can do about it...

[ajpiano]

#8576 is a duplicate of this ticket.

[Dave Methvin]

Merge pull request #416 from gnarf37/ticket_6652

CSS: Remove filter from style when setting opacity to 1 - Fixes #6652 - R

Changeset: 8d5c874227a65434a694b97148577fd4f93ab264

[anonymous]

This fix seems to have a regression on Symbian phones (tested on N8). When animating the opacity to 1, there is a JavaScript error

Error: Value undefined (result of expression style.removeAttribute) is not object

that is caused by the line

style.removeAttribute( "filter" ); 

The comment just above the offending line claims "style.removeAttribute is IE Only, but so apparently is this code path...", but apparently that code path is not IE only so one should be more mindful about the method availability.