Flash versus Firefox

10th January 2005

On a number of the Flash forums I visit regularly I have noticed that questions seem to appear cyclically. One of the current hot topics is “Why is my movie is broken in Firefox?” In almost every case the problem is the same — that the movie appears far too small — and it relates to the use of percentage dimensions.

The problem in reality has nothing to do with the movie itself, it is caused by the markup produced by Flash to display the movie in a page. It first started because of a change in this markup introduced by Flash MX2004. Prior to MX2004 Flash had churned out some fairly untidy non-standard markup, however with MX2004 Macromedia decided to clean things up a bit. Out with the old non-standard markup and in with some new non-standard markup with added /’s for XHTML “compliance”. As part of this move to XHTML a DOCTYPE declaration was also included in the page to inform the world that the page was written using XHTML (ooh, it has an “X” in it so it must be better!) The use of a DOCTYPE is significant — most modern web browsers use the presence of a valid DOCTYPE to decide how they will render the page. The logic being that a page containing a DOCTYPE should have been written according to the standard it claims to be. Hence the browser will try to render it more strictly according to the standards, whilst other pages will be rendered more leniently using what is commonly known as “Quirks mode”. In quirks mode the browser attempts to emulate the behaviour of older non-standards compliant browsers in order to retain backwards compatibility.

The problem arises when Mozilla/Firefox is in it’s strict rendering mode and we want to specify the height of an element as a percentage. According to the specs the percentage height should be calculated based on the height of the containing element, which in the case of the code produced by Flash is the body of the page. In quirks mode the body would automagically stretch to fill the entire viewport and as a result so would the Flash movie. However according to the standards the body should only resize to fit the content it contains — and this what Mozilla tries to do when it renders the page in it’s standards compliant mode. So the Mozilla rendering is technically correct (The best kind of correct) albeit slightly annoying as other browsers seem to treat this as a special case even when in standards mode.

Clearly one option would be to simply remove the DOCTYPE to cause the page to be rendered in quirks mode again just like the pages created by versions of Flash prior to MX2004. However standards mode does have advantages since (in theory) we should be able to guarantee consistent rendering across future generations of the different browsers.

To get the desired effect in standards compliance mode we need to manually make sure that the body does fill the viewport. We can do this with a little bit of CSS by inserting the following somewhere in the head of the page,

<style type="text/css">
html, body {
  margin: 0; padding: 0;
  height: 100%;
}
</style>

Notice that the rule is applied to both the body and html elements, the reason for this is simple — just like we needed to explictly set the height for the parent of the Flash movie, we have to do the same thing for the parent of the body. Once this is done Firefox should display the movie at the intended size.

Permalink. Posted on 10th January 2005 in Browsers, Flash.

Comments

  1. Excellent. This is exactly the info I've been needing. Thanks.

    # Posted by Susan Litton on 20th November 2005.

  2. Hello, I have gone to W3 and had my html validated, but firefox is still not working with some simple javaScript while explorer is. I just want the browser window to close "onClick". it is very simple script, to wit: <a href="#" onclick="javascript:window.close()"><u>Close Window</u></a> W3 says it's fine and good but firefox doesn't respond at all. In my firefox preferences, JavaScript is enabled and flash works fine too. Any more resources?…

    # Posted by alexander on 20th December 2005.

  3. Hi Alexander,

    You don't need the javascript: inside the onclick event handler, it should just be

    <a href="#" onclick="window.close();">Close Window</a>

    # Posted by Andy on 21st December 2005.

  4. Wow, you're a real life saver!

    # Posted by cc on 13th March 2006.

  5. The latest weekly builds of Opera (tested in build 8359) seem to treat this in the same way as Mozilla/Firefox now.

    # Posted by Andy on 17th April 2006.

  6. Having an issue with Flash and IE. It actually works in Firefox 1 (but not 2). Basically, when I go to my file on my server (http://www.progressivemultimediaproductions.com/images/ghetto.html)

    In IE the video is showing automatically in it's full screen mode, and will not resize. In Firefox 1, it works great, in Firefox 2, it's broke just like in IE. I am lost, and am more than willing to post my code or send someone an fla file to see where I am making my mistakes. Thanks in advance.

    # Posted by Jason on 2nd November 2006.

Sorry, comments for this item are currently closed.

Of Interest

Hangouts

Listening