Ruby on Rails | Screencasts | Download | Documentation | Weblog | Community | Source

Ticket #3884 (new defect)

Opened 3 years ago

Last modified 3 years ago

When doing a DropOut followed by SlideDown, the opacity isn't restored in IE 6

Reported by: inertia+scriptaculous@gmail.com Assigned to: thomas@fesch.at
Priority: normal Milestone:
Component: script.aculo.us Version:
Severity: normal Keywords:
Cc:

Description

Code to reproduce: 

<div id="boo">
	<div>
		Here's something great!
	</div>
</div>

<script language="javascript" type="text/javascript">
	new Effect.DropOut('boo',{queue: 'end'});
	new Effect.SlideDown('boo',{queue: 'end'});
</script>

Works fine in Firefox, but in IE6, the filter property of the 'boo' div remains at alpha(opacity=0), so the block never reappears.

This is with the latest downloadable version (1.5.2)

Change History

04/01/06 14:46:56 changed by scriptaculous@zenquest.com

I fixed this issue by adding one at line to the bottom of afterFinishInternal for Effect.DropOut:

Version 1.6.0: 

afterFinishInternal: function(effect) {
          effect.effects[0].element.hide();
          effect.effects[0].element.undoPositioned();
          effect.effects[0].element.setStyle(oldStyle);
        }

After my change: 

afterFinishInternal: function(effect) {
          effect.effects[0].element.hide();
          effect.effects[0].element.undoPositioned();
          effect.effects[0].element.setStyle(oldStyle);
          effect.effects[0].element.setOpacity(1.0);
        }

I tested in Firefox and IE, and both worked. I don't have a Mac to test it on Safari with.

04/18/06 23:58:51 changed by mmaunder@gmail.com

Looks like the problem is in Effect.Fade. An element with no opacity attribute in it's style has it's opacity left at 0 after the fade has completed. I also resolved this using setOpacity(1) after the Fade completed. One may argue that it's not strictly a bug because you are fading from an opacity of 1 to 0 - but the docs should at least note that you need to reset your opacity rather than just setting display: block; once you're done.