IE<9 stylesheets with filter rules break when setting opacity

[jdlrobson]

In Internet Explorer the css filter property is used for opacity whenever you run .show / .hide functions

The style attribute of the #test element is edited during the transition to alter opacity and when the animation finishes filter is set as empty string on the elements style attribute.

Thus any existing css rules using 'filter' are cancelled out which I believe is incorrect behaviour.

As a solution I think either

At the end of the transition the filter rule in the style of #test should be removed so the css rule gets the power back. (Try clicking magic button to demonstrate). OR Opacity should not be applied for elements which already have the filter css rule.

See  http://jonrobson.me.uk/static/mtc/jquerybug.html for a demo of the problem.

[snover]

 test case

So, I guess we need to make sure we copy over filters from currentStyle when messing with opacity in IE<9?

[addyosmani]

#2422 is a duplicate of this ticket.

[tommy]

Replying to jdlrobson:

As a solution I think either

At the end of the transition the filter rule in the style of #test should be removed so the css rule gets the power back. (Try clicking magic button to demonstrate).

That's not a good idea. All the filters should be kept during transition.

OR Opacity should not be applied for elements which already have the filter css rule.

That's even worse idea, because I'd make impossible to fade out elements with shadow (for instance).

IMHO setting opacity in IE should be rewritten and currentStyle.filter instead of style.filter should be taken into account.

[jdlrobson@…]

I suggested those 2 solutions as I didn't think filters could be combined (never tried myself). Obviously if multiple filters can be used yes that should definitely happen.

[tommy]

Replying to snover:

So, I guess we need to make sure we copy over filters from currentStyle when messing with opacity in IE<9?

Yes.

[tommy]

My suggestion is to replace following code (starting from line 5269 in  jquery-1.4.4rc2.js):

// Set the alpha filter to set the opacity
var opacity = jQuery.isNaN(value) ?
	"" :
	"alpha(opacity=" + value * 100 + ")",
	filter = style.filter || "";

style.filter = ralpha.test(filter) ?
	filter.replace(ralpha, opacity) :
	style.filter + ' ' + opacity; 

with:

// Set the alpha filter to set the opacity
var opacity = jQuery.isNaN(value) ?
	"alpha(opacity=100)" :
	"alpha(opacity=" + value * 100 + ")",
	filter = elem.currentStyle.filter || "";  

style.filter = ralpha.test(filter) ?
	filter.replace(ralpha, opacity) :
	filter + ' ' + opacity;

[snover]

#4727 is a duplicate of this ticket.

[snover]

#6271 is a duplicate of this ticket.

[snover]

#8273 is a duplicate of this ticket.

[Alex Yaroshevich <qfox@…>]

see also:  http://jsfiddle.net/AWjgs/10/

[john]

Let's consider this for 1.7.

[mikesherov]

This works in 1.7.2:

 http://jsfiddle.net/R7sk7/