Bug Tracker

Opened 9 years ago

Closed 7 years ago

#6841 closed bug (worksforme)

IE<9 stylesheets with filter rules break when setting opacity

Reported by: jdlrobson Owned by:
Priority: high Milestone: 1.next
Component: css Version: 1.4.3
Keywords: filter ie6 ie7 show hide Cc:
Blocked by: Blocking: #6652

Description

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.

Change History (14)

comment:1 Changed 9 years ago by snover

Keywords: show hide added
Milestone: 1.4.3
Priority: high
Status: newopen
Summary: IE6/7 css using filter rule wiped out by use of show() and hide() functionsIE6/7 stylesheets with filter rules break when setting opacity
Version: 1.4.21.4.3

test case

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

comment:2 Changed 9 years ago by addyosmani

#2422 is a duplicate of this ticket.

comment:3 in reply to:  description Changed 9 years ago by 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.

comment:4 Changed 9 years ago by 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.

comment:5 in reply to:  1 Changed 9 years ago by 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.

comment:6 Changed 9 years ago by 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;

comment:7 Changed 9 years ago by snover

Blocking: 6652 added

comment:8 Changed 9 years ago by snover

#4727 is a duplicate of this ticket.

comment:9 Changed 9 years ago by snover

#6271 is a duplicate of this ticket.

comment:10 Changed 9 years ago by snover

#8273 is a duplicate of this ticket.

comment:11 Changed 9 years ago by Alex Yaroshevich <qfox@…>

comment:12 Changed 8 years ago by john

Milestone: 1.next

Let's consider this for 1.7.

comment:13 Changed 8 years ago by mikesherov

Summary: IE6/7 stylesheets with filter rules break when setting opacityIE<9 stylesheets with filter rules break when setting opacity

comment:14 Changed 7 years ago by mikesherov

Resolution: worksforme
Status: openclosed

This works in 1.7.2:

http://jsfiddle.net/R7sk7/

Note: See TracTickets for help on using tickets.