strange stage-size problem, but only in ie6

I’ve just been working on an small piece of pure ActionScript3. Essentially the migrating from the large horrible Twitter Widget that I had in the right column, to the text-only representation now overlayed on the header image above.

I use SWFObject to embed the SWF in the page. I set the dimensions of the SWF to 780×45. Within the main function of the SWF I prevent the stage from scaling and set it to align top left. I then use the stage.stageWidth and stage.stageHeight properties to draw a semitransparent background within which to position a TextField then trot-off to get the Twitter feed.

All is well on Safari and Firefox. But when I test on Internet Explorer 6, strange things happen. The first time a page loads, it displays ok. But reload the page, or navigate to another within the blog where the SWF is loaded from cache, and the layout is quite messed up. Testing showed that this is because the stage’s stageHeight and stageWidth are returning value 0 in this circumstance. Further testing shows that although the stage’s initial size is 0x0, it does get resized at some point.

The solution I’ve implemented is to listen for and handle resize events. Mildly frustrating as I didn’t plan on dealing with resize. The only reason my application is structured like this is to allow the SWF to adapt to the dimensions set via SWFObject. Not to allow the SWF fluid resizing through it’s life.

Simply moving the positioning code to the resize handler solved the ie6 problem, but for the other browsers that render at the correct size from the off, no resize event fires. So from our main function we have to put a manual call in to the resize handler (with null as the argument), and then only modify positioning if the stage dimensions are something other than 0x0.

3 Comments

  1. Keith Dodd says:

    Did you ever figure out what’s going on here?
    I just got the same type of thing, caused by stage.stageWidth in AS3 being reported as 0 on refresh in IE. Both IE 6 and 7.

    I’ll take a look at the resize idea.
    I have a function that creates a box positioned in center of stage. I’ve called that in my constrictor function. How would you call it on resize but still do the initial call for those browsers that aren’t doing a resize?

    Why is everything so difficult!

    Thanks
    Keith

  2. creacog says:

    sorry for the late reply.

    > Did you ever figure out what’s going on here?
    I tried to describe what’s going on as far as I see it. Then tried to describe how I worked around it. I should have posted the code, relevant extracts of which follow from the Document class…

    // Constructor
        public function DocClass()
        {
            super();
            stage.addEventListener( Event.RESIZE,
                                    handleResize );
    // dummy resize for browsers that have already
    // correctly sized the stage
            handleResize( null );
        }
    /**
    * @private
    * Handle resize
    */
        private function handleResize( e:Event ):void
        {
     // we only need act if the new size is other than 0x0
            if( stage.stageHeight > 0 &&
                stage.stageWidth  > 0 )
            {
    // at this point the stage.stageHeight and stage.stageWidth
    // contain reliable values
    
            }
        }
    
  3. bobby says:

    I have added this issue to the SWFObject FAQ (Q21):
    http://code.google.com/p/swfobject/wiki/faq

Leave a Reply