IE transparency turns opaque with fadein, fadeout, etc

[coolaj86]

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.

[spudly]

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.

[mijohnson]

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:

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

this inline style overrides the:

progid:DXImageTransform.Microsoft.gradient

specified in your 'aCSSclass' in you CSS file.

[mijohnson]

workaround i found

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

{

if($.browser.msie) {

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

}

});

[snover]

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

[trac-o-bot]

Automatically closed due to 14 days of inactivity.