Skip to main content

Bug Tracker

Side navigation

#5857 closed bug ()

Opened January 19, 2010 12:03AM UTC

Closed November 11, 2010 11:09PM UTC

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:

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: majorminor

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


<div class="aCSSclass" style="filter :"/>

this inline style overrides the:


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




$(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: newpending

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: pendingclosed

Automatically closed due to 14 days of inactivity.