#6841 closed bug (worksforme)

Opened July 28, 2010 12:16PM UTC

Closed May 29, 2012 01:19AM UTC

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:

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).

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.

Attachments (0)

Change History (14)

Changed October 27, 2010 12:37AM UTC by snover comment:1

keywords:	filter ie6 ie7 → filter ie6 ie7 show hide
milestone:	1.4.3
priority:	→ high
status:	new → open
summary:	IE6/7 css using filter rule wiped out by use of show() and hide() functions → IE6/7 stylesheets with filter rules break when setting opacity
version:	1.4.2 → 1.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?

Changed November 05, 2010 07:52AM UTC by addyosmani comment:2

#2422 is a duplicate of this ticket.

Changed November 05, 2010 10:41AM UTC by tommy comment:3

Replying to [ticket:6841 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.

Changed November 05, 2010 11:18AM UTC by jdlrobson@gmail.com comment:4

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.

Changed November 05, 2010 11:19AM UTC by tommy comment:5

Replying to [comment:1 snover]:

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

Yes.

Changed November 05, 2010 01:15PM UTC by tommy comment:6

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;

Changed November 17, 2010 05:11AM UTC by snover comment:7

blocking:	→ 6652

Changed November 20, 2010 10:11PM UTC by snover comment:8

#4727 is a duplicate of this ticket.

Changed November 20, 2010 10:12PM UTC by snover comment:9

#6271 is a duplicate of this ticket.

Changed February 14, 2011 05:42PM UTC by snover comment:10

#8273 is a duplicate of this ticket.

Changed February 15, 2011 04:23PM UTC by Alex Yaroshevich <qfox@ya.ru> comment:11

Changed April 16, 2011 09:44PM UTC by john comment:12

milestone:	→ 1.next

Let's consider this for 1.7.

Changed February 22, 2012 12:57AM UTC by mikesherov comment:13

summary:	IE6/7 stylesheets with filter rules break when setting opacity → IE<9 stylesheets with filter rules break when setting opacity

Changed May 29, 2012 01:19AM UTC by mikesherov comment:14

resolution:	→ worksforme
status:	open → closed

This works in 1.7.2:

http://jsfiddle.net/R7sk7/

Side navigation