Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#12526 closed defect (duplicate)

dojo.animateProperty Needs to Use CSS Opacity for IE9

Reported by: Fergus Hadley Owned by:
Priority: high Milestone: 1.5.2
Component: General Version: 1.6.0
Keywords: ie9 Cc:
Blocked By: Blocking:

Description

When fading opacity in, in IE9, once it reaches opacity 1 (fully opaque), the node disappears.

It appears that dojo is using a microsoft filter for the opacity but that it doesn't change the css opacity property. Once the filter animation is finished, the element returns to invisible because it has opacity 0.

Check out this test case (replacing the image tag with one for any image you have handy): 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>IE9 Opacity Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js.uncompressed.js" type="text/javascript"></script>

<script>
dojo.require( 'dojo.fx.easing' );
dojo.ready
(
	function()
	{
		console.log( 'ready' );
		
		var slide = dojo.query( '#container .slide' )[0];
		
		dojo.style
    	( 
    		slide,
			{
				zIndex: 7, 
				opacity: 0,
				display: 'block'
			}
    	);
    	
    	console.log( 'fade in animation started' );
    	
    	// fade in
    	dojo.animateProperty
    	( 
    		{ 
    			properties: 
    			{
    				opacity: 1
    			},
    			node: slide, 
    			duration: 3500,	    			
    			easing: dojo.fx.easing.expoOut,
    			onEnd: dojo.hitch
    			(
    				this,
    				function()
    				{
    					console.log( 'fade in animation finished', slide );
    					
    				}
    			)
    		} 
    	).play();
	}
);
</script>

<style>
#container {
    display: block;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
	width: 808px;
	height: 508px;
}
#container a.slide {
    display: none;
    left: 0;
    opacity: 0;
    outline: 0 none;
    position: absolute;
    text-decoration: none;
    top: 0;
    z-index: 5;
}
#container a.slide img {
    margin: 0;
    padding: 0;
}


</style>
</head>
<body>

<div id="container">
	<a class="slide" href="#">
		<img src="a1_banners_1.png" width="808" height="308" />
	</a>
</div>

</body>
</html>

Change History (4)

comment:1 Changed 8 years ago by Fergus Hadley

Adding this to the onEnd function fixes the issue:

{{ node.style.opacity = 1; }}

But using this does not:

{{ dojo.style (

node, {

zIndex: 6, opacity: 1

}

); }}

So presumably dojo.style() also needs fixing.

comment:2 Changed 8 years ago by Fergus Hadley

(oops - ignore the zIndex property. Meant to delete that before posting and cannot edit!)

comment:3 Changed 8 years ago by bill

Resolution: → duplicate
Status: new → closed

Presumably dup of #12455.

comment:4 Changed 8 years ago by Kenneth G. Franqueiro

Milestone: tbd → 1.5.2

Updating milestone to 1.5.2 to reflect inclusion in changeset [26956] for ticket #14199.

Note: See TracTickets for help on using tickets.