SWFObject , Firefox, and Blank Screens - Oh My!

Well I had a RTFM moment when my Firefox 3 browser recently stopped displaying my flash application a.k.a Blank Screen Syndrome.



I was using the following dynamic technique with SWFObject 2.1 with the width and height set to 100%.

<script type="text/javascript">
   swfobject.embedSWF("myContent.swf", "myContent", "100%",
     "100%", "9.0.0");
</script>

I won’t bore you with the weird and wonderful solutions attempted and failed through a particularly frustration few hours – none of which I will ever get back.

As a last resort I poured through the documentation with a desperate vigour and turned up this little gem:

because Firefox in standards compliant mode interprets percentages in a very strict way (to be precise: the percentage of the height of its parent container, which has to be set explicitly):

<style type="text/css" media="screen">
   html, body, #containerA, #containerB { height:100%; }
   body { margin:0; padding:0; overflow:hidden; }
</style>

Suffice it to say this fixes the no show <ahem> “bug” in Firefox 3.

In a rather poor sportsman like manner I will point out that this little titbit is not in the Documentation section of the wiki but rather the FAQ. The fix is also conspicuously absent from the sample code downloaded with the installation and even the fancy (and extremely convenient) SWFfObject Generator does not create these styles.

Stay tuned for more glorious RTFM moments.