Opened 9 years ago

Closed 9 years ago

#11567 closed defect (wontfix)

1.5.0 breaks fadeIn in IE

Reported by: mark007 Owned by: sjmiles
Priority: high Milestone: tbd
Component: HTML Version: 1.5
Keywords: Cc:
Blocked By: Blocking:

Description

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);
}

Attachments (3)

tc.rar (867 bytes) - added by mark007 9 years ago.
fade.html (1.0 KB) - added by bill 9 years ago.
simplified test case
fadeWorking.html (1.0 KB) - added by bill 9 years ago.
working test case, using filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0) for IE

Download all attachments as: .zip

Change History (7)

comment:1 Changed 9 years ago by bill

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

Changed 9 years ago by mark007

Attachment: tc.rar added

comment:2 Changed 9 years ago by 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);

comment:3 Changed 9 years ago by bill

Component: GeneralHTML
Owner: changed from anonymous to sjmiles

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.

Changed 9 years ago by bill

Attachment: fade.html added

simplified test case

Changed 9 years ago by bill

Attachment: fadeWorking.html added

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

comment:4 Changed 9 years ago by dante

Resolution: wontfix
Status: newclosed

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.

Note: See TracTickets for help on using tickets.