1.5.0 breaks fadeIn in IE

[mark007]

A web tool I created does the following when loading the page.

1) Shows a loading screen, while loading alot of data in the background. 2) Then it uses a fadein to make the main div visible.

Since I upgraded this page to use dojo 1.5.0 the fadein doesn't work, ie the page appears completely white after loading. When hovering the mouse around the page I can see and actually right click on objects on the page, just the entire page remains white.

This only happens in IE 7 / IE 8. In firefox and chrome the fadein works, and all is visible.

Here is the simple fade in command to bring the div visible.

var loading_div=dojo.byId("loading_div");
loading_div.parentNode.removeChild(loading_div);
var fadeIn = dojo.fadeIn({node: dojo.byId("mainTabContainer"),duration: 500});
fadeIn.play();

This tabcontainer div code starts like this.

<div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width:100%;height:100%">

The CSS used to make the contents of the page invisible initially are.

#mainTabContainer{
        opacity:0;
        zoom:1;
        width:100%;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
}

[bill]

You'll need to attach a full test case to this ticket (and every other ticket you file), using the "attach file" button.

[mark007]

Test Case attached.

The problem in 1.5.0 seems related to this line in style.css also attached above.

filter: alpha(opacity=0);

[bill]

Thanks for the test case. BTW, it's easier for us if you attach test files as a single HTML file. I'll attach a simpler version.

I wouldn't say this was working in 1.5, as the text is instantly appearing rather than fading in. 1.5 just makes it fail in a worse way: the div never appears at all rather than instantly appearing.

The problem is with dojo._getOpacity(node) which is return 1, due to an exception, rather than the actual opacity. And, as you mentioned, the issue is with how you specified your filters for IE. Specifying like this works everywhere:

#mainTabContainer{
	opacity:0;
	zoom:1;
	width:100%;
	filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

So not sure if this should be considered a bug or just a user error. I know that "-ms-filter" is (if nothing else) more politically correct than plain "filter", but "filter" has the advantage that it actually works.

[bill]

simplified test case

[bill]

working test case, using filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0) for IE

[dante]

the opacity stuff is fragile, and there have always been mixed -filter/opacity: in CSS vs jsdom issues. One technique I use is set visibility:hidden initially in CSS, and immediately in js set the opacity via dojo.style (which sets a filter, if needed) and reset visibility:visible.