#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 10 years ago by
comment:2 Changed 10 years ago by
(oops - ignore the zIndex property. Meant to delete that before posting and cannot edit!)
comment:3 Changed 10 years ago by
Resolution: | → duplicate |
---|---|
Status: | new → closed |
Presumably dup of #12455.
comment:4 Changed 9 years ago by
Milestone: | tbd → 1.5.2 |
---|
Note: See
TracTickets for help on using
tickets.
Adding this to the onEnd function fixes the issue:
{{ node.style.opacity = 1; }}
But using this does not:
{{ dojo.style (
); }}
So presumably dojo.style() also needs fixing.