Opened 13 years ago
Closed 12 years ago
#5857 closed bug
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.
Change History (6)
comment:1 Changed 13 years ago by
Keywords: | opacity added |
---|---|
Priority: | major → minor |
comment:2 Changed 13 years ago by
comment:3 Changed 12 years ago by
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.
comment:4 Changed 12 years ago by
workaround i found
$(your-selector-here).fadeIn(1000, function()
{
if($.browser.msie) {
$(this).css("filter","progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#a4a4a4');");
}
});
comment:5 Changed 12 years ago by
Owner: | set to coolaj86 |
---|---|
Status: | new → pending |
Please create a reduced test case for this ticket or let us know if it is fixed. Thanks!
comment:6 Changed 12 years ago by
Status: | pending → closed |
---|
Automatically closed due to 14 days of inactivity.
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.