Rectangle doesn't get drawn on root object on refresh in IE

Question

I have an swf file which behaves strangely on IE. The thing is that a certain rectangle doesn't get drawn when viewing the page after the first load. It only appears in IE and a quick fix is to make the path to the swf unique on every request so it doesn't get cached. The rest of my objects gets drawn every time.

The code is very simple

public function drawStage() 
{ 
    var bgRect:Shape = new Shape();

    bgRect.graphics.beginFill(0x5F5F5F);
    bgRect.graphics.drawRect(0,84, stage.stageWidth, 115);
    bgRect.graphics.endFill();
    bgRect.alpha = 0;

    addChild(bgRect);

    Tweener.addTween(bgRect, { alpha: 1, time: 1 }); 
}

which is called in my constructor. The whole class can be seen here: http://katuaq.wwwdev.punktum.gl/flash/bioteaser.txt, and the swf live here: http://katuaq.wwwdev.punktum.gl/.

As you probably figured out by now, it's the gray background behind the images that doesn't get drawn on refresh in IE.

Answer 1

IE does something strange with cached swf's that makes the stageWidth wrong for the first few frames. The solution is to either wait a little while before reading that value or just using a set number.

Answer 2

Don't call drawStage from the constructor. Set up a listener for the ADDED_TO_STAGE event in the constructor, and call drawStage from the handler for this event. Additionally, you might find that your Stage dimensions change when the user uses the browser zoom function, so listen out for the RESIZE event and act accordingly.

Answer 3

It's definitely a known issue. On refresh, stage.{SIZES} are set to 0 in IE. You could add a listener (enter frame or resize) checking for the sizes to be "non zero":

stage.addEventListener(Event.RESIZE, onResize);
stage.dispatchEvent(new Event(Event.RESIZE));

function onResize(event:Event):void 
{
    if (stage.stageHeight > 0 && stage.stageWidth > 0) 
    {
        stage.removeEventListener(Event.RESIZE, resizeHandler); 
    }
}

Also, you should be aware that numerous events will not be handled correctly in certain browsers:

http://www.actionscript.org/forums/showthread.php3?t=136345&highlight=timeline+preloader

Answer 4

It's a know problem with caching and Internet Explorer.

The simplest solution is the one you have right now. Making the swf path unique. Otherwise you unnecessary obfuscate your actionscript code.

Be aware that this problem also appears when you load images into flash. If once loaded you might get problems with IE. There you will have to make the path to the images unique.