IE transparency turns opaque with fadein, fadeout, etc

Reported by:	coolaj86	Owned by:	coolaj86
Priority:	minor	Milestone:	1.4.1
Component:	effects	Version:	1.4
Keywords:	opacity	Cc:
Blocked by:		Blocking:

Description

Consider a blocker screen that comes up prompting for passwords. The background is translucent and the login form is opaque.

#loginui_mask {

position: fixed; /* Block on scroll */

background: #000;

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* IE8 */

filter: alpha(opacity=60); /* IE6/7 */

opacity: 0.6; /* CSS */

}

Using show() and hide() works, but elements which graduate the (dis)appearance of elements such as fadeIn() and fadeOut() change the opacity to 100 rather than 60 upon completion.

Attachments (0)

Change History (6)

Changed January 20, 2010 03:02AM UTC by dmethvin comment:1

keywords:	→ opacity
priority:	major → minor

Changed May 19, 2010 06:26PM UTC by spudly comment:2

I have a similar issue, which I expect is caused by the same bug. I'm using the following css to set a gradient background in IE:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#EEEEEE);

fadeIn() removes the gradient.

I expect that jQuery is simply overriding the filter property completely instead of simply changing/adding the alpha opacity filter part of it.

Changed September 29, 2010 11:17AM UTC by mijohnson comment:3

I too have this problem. It appears to be caused by the fadein effect leaving an inline style value for filter as blank when the animation ends

ie:

this inline style overrides the:

progid:DXImageTransform.Microsoft.gradient

specified in your 'aCSSclass' in you CSS file.

Changed September 29, 2010 11:26AM UTC by mijohnson comment:4

workaround i found

$(your-selector-here).fadeIn(1000, function()

{

if($.browser.msie)

{

$(this).css("filter","progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#a4a4a4');");

}

});

Changed October 19, 2010 05:18AM UTC by snover comment:5

owner:	→ coolaj86
status:	new → pending

Please create a reduced test case for this ticket or let us know if it is fixed. Thanks!

Changed November 11, 2010 11:09PM UTC by trac-o-bot comment:6

status:	pending → closed

Automatically closed due to 14 days of inactivity.

Side navigation

#5857 closed bug ()