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

Ticket #8710 (new defect)

Opened 2 years ago

Last modified 1 year ago

Display problem with IE 7 when using blind down effect

Reported by: hli Assigned to: thomas@fesch.at
Priority: normal Milestone: 2.x
Component: script.aculo.us Version:
Severity: normal Keywords:
Cc:

Description

In some cases, when you use the blinddown effect in IE 7, some elements of the page disappear.

They reappear as soon as you move the mouse.

It may be a bug in IE rendering engine and somehow triggering a reflow should fix it.

You can view an example of what I mean by going to this page: http://dev.espacevin.com/fr/recherche.asp and clicking on '- de criteres' then '+ de criteres' (don't move the mouse on the second click).

I've attached a screenshot of the "effect"

Attachments

espacebug.png (10.1 kB) - added by hli on 06/21/07 12:40:09.
Left is "normal" state, right is "broken" state after blinddown

Change History

06/21/07 12:40:09 changed by hli

  • attachment espacebug.png added.

Left is "normal" state, right is "broken" state after blinddown

07/06/07 01:11:07 changed by itaylor

I had the same issue and managed to work around it by applying a width value (in my case 99%) to the element that was getting blinddown applied to it.

It's a bit hackish... and I don't understand why it fixed it... but hey, it's IE.

This might help others who are experiencing the same thing to work around it until a real fix comes along.

05/15/08 14:06:28 changed by bgcboyus

Hey guys in case anyone still cares about this here is what I have come up with to fix both ie6 problems and ie7 problems with blind up

Effect.BlindUp = function(element) {
  element = $(element);
  element.makeClipping();
  var browserName = navigator.appName; 
  IE7 = (navigator.appVersion.indexOf("MSIE 7.")==-1) ? false : true;

  if (browserName == "Microsoft Internet Explorer" && !IE7)
  {
	  return new Effect.Scale(element, 0,
		Object.extend({ scaleContent: false, 
		  scaleX: false, 
		  restoreAfterFinish: false,
		  afterFinishInternal: function(effect) {
			effect.element.hide().undoClipping();
		  } 
		}, arguments[1] || { })
	  );
  }
  else
  {
	  return new Effect.Scale(element, 0,
		Object.extend({ scaleContent: false, 
		  scaleX: false, 
		  restoreAfterFinish: true,
		  afterFinishInternal: function(effect) {
			effect.element.hide().undoClipping();
		  } 
		}, arguments[1] || { })
	  );
  }
};

Effect.BlindDown = function(element) {
  element = $(element);
  var elementDimensions = element.getDimensions();
  var browserName = navigator.appName; 
  IE7 = (navigator.appVersion.indexOf("MSIE 7.")==-1) ? false : true;
  if (browserName == "Microsoft Internet Explorer" && !IE7)
  {
	  return new Effect.Scale(element, 100, Object.extend({ 
		scaleContent: false, 
		scaleX: false,
		scaleFrom: 0,
		scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
		restoreAfterFinish: false,
		afterSetup: function(effect) {
		  effect.element.makeClipping().setStyle({height: '0px'}).show(); 
		},  
		afterFinishInternal: function(effect) {
		  effect.element.undoClipping();
		}
	  }, arguments[1] || { }));
  }
  else
  {
	  return new Effect.Scale(element, 100, Object.extend({ 
		scaleContent: false, 
		scaleX: false,
		scaleFrom: 0,
		scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
		restoreAfterFinish: true,
		afterSetup: function(effect) {
		  effect.element.makeClipping().setStyle({height: '0px'}).show(); 
		},  
		afterFinishInternal: function(effect) {
		  effect.element.undoClipping();
          Effect.Appear(element, {delay: 1, duration: .1});
		}
	  }, arguments[1] || { }));
  }
};