Resizing Flash in IE8 is buggy

Problem

When resizing a Flash object in IE, it's resize handler incorrectly thinks that only the stage width has been updated.

Steps for reproducing the bug

1. You roll over and click a Flash button
2. The button makes an ExternalInterface call to JS. JS resizes Flash among other things.
3. In all non-IE browsers, Flash is notified of the dimension change and executes its resize handler flawlessly. In IE8, the resize handler is called but is only its stage width has been updated. It still believes its height is the same.
4. To finally get IE8's Flash to acknowledge its true height, roll your mouse out of the SWF.

Actionscript

package {
 import flash.external.*;
 public class Player {
  public function Player(container:Stage) {
   this.container.addEventList开发者_JAVA技巧ener(Event.RESIZE, this.onResize);
  }
  public function expand():void {
   ExternalInterface.call('expand');
  }
  public function onResize():void {
   // float chrome buttons to the right
   // float chrome to the bottom
  }
 }
}

Javascript

// Using Prototype framework
function expand() {
 $('flash').setStyle({
   width: '500px',
   height: '400px'
 });
 // do other stuff in JS too
}

The listener gets triggered fine in all browsers except Internet Explorer. There's no problem with the Javascript - I see the Flash getting resized. But the Actionscript listener doesn't get fired until I my mouse moves out of the SWF. What do I need to know about IE's rendering engine to fix this?

Before

After - IE's Flash is notified of the width change, but still thinks it's height is the same.

Move mouse out of SWF - you must roll your mouse out of the SWF for Flash to acknowledge its true height in IE8

not sure why that is, But I would suggest (or strongly recommend) that you add a callback on the flash side, and trigger it from javascript to force the call.

look into ExternalInterface.addCallback

I could go on about how to get that part (js <-> Flash communicaiton) working, but someone's already done that.

http://www.viget.com/inspire/bi-directional-actionscript-javascript-communication/

Have you checked this out?

http://manos.malihu.gr/resize-flash-dynamically-with-javascript-and-actionscript

I solved this by setting Flash's height a 2nd time. Even though it's set to the same height, it tricks IE to redraw the page.

I had an issue similar to this. I used CSS to place the swf in a block, and use overflow:hidden; to hide anything outside of my parameters. Worked easy in ie8.