Alternate XHTML for Flash not appearing for Google Chrome or Safari

I. The Problem

For the past couple years, I’ve been using alternate XHTML for my Flash pages for purposes of both accessibility and SEO. The code generally looks something like this:

<div id="flashContent">
   <object type="application/x-shockwave-flash" data="swfFileNameHere.swf" height="650" width="950"> <param name="movie" value="swfFileNameHere.swf" />
      <div id="noFlashContent">
         <h1>Some Title</h1>
         <p>Some content here.</p>
      </div>
   </object>
</div>

The SWF is then displayed on the XHTML page:

To view the alternate XHTML content, I change the name of the SWF file in the object tag to a dummy file that doesn’t exist:

<div id="flashContent">
   <object type="application/x-shockwave-flash" data="nonExistentFileNameHere.swf" height="650" width="950"> <param name="movie" value="swfFileNameHere.swf" />
      <div id="noFlashContent">
         <h1>Some Title</h1>
         <p>Some content here.</p>
      </div>
   </object>
</div>

After uploading to my web host with Dreamweaver, the alternate XHTML is visible in Firefox, IE and Opera:

Strangely though, the alternate XHTML content is not visible in Google Chrome or Safari; it is completely “whited-out”.

II. The Solution

The alternate XHTML content can be placed outside the object tags, and then positioned directly under the Flash object. For this to work, the Flash object must be set to transparent:

<div id="flashContent">
   <object type="application/x-shockwave-flash" data="nonExistentFileNameHere.swf" height="650" width="950"> <param name="movie" value="swfFileNameHere.swf" /> <param name="WMode" value="transparent" /> </object>
   <div id="noFlashContent">
      <h1>Some Title</h1>
      <p>Some content here.</p>
   </div>
</div>

The required CSS for this is:

#flashContent{
   height: 650px;
   width: 650px;

   /* IMPORTANT FOR ABSOLUTE POSITIONING TO WORK */
   position: relative;
   /* CANNOT USE ANY OTHER BACKGROUND COLOR!!! */
   background-color: transparent;
}
#noFlashContent{
   height: inherit;
   width: inherit;
   padding: 0px;

   position: absolute;
   top: 0px;
   left: 0px;
   z-index: -1;
   /* ANY BACKGROUND COLOR WILL DO... */
   background-color: white;
}

III. Static Image Replacement

Several of my Flash pages feature an animated panorama of Calgary, with an alternative static JPG image displayable using the following code:

<div id="flashFooter">
   <object type="application/x-shockwave-flash" data="myPathway/animatedCalgary.swf" height="66" width="965"> <param name="movie" value="animatedCalgary.swf" />
      <img src="myPathway/staticCalgary.jpg" alt="Calgary Skyline" />
   </object>
</div>

Again, the replacement image doesn’t display in Google Chrome or Safari. This can be fixed with the following code:

<div id="flashFooter" style="position: relative;">
   <object type="application/x-shockwave-flash" data="myPathway/animatedCalgary.swf" height="66" width="965"> <param name="movie" value="animatedCalgary.swf" /> <param name="WMode" value="transparent" /> </object>
   <img src="myPathway/staticCalgary.jpg" alt="Calgary Skyline" style="position: absolute; top: 0px; left: 0px; z-index: -1;" />
</div>

IV. Solutions In Search Of A Problem?

A day after coming up with the fix, I faced the task of manually changing the code for 40 or 50 Flash pages on this site.

At that point, I tried temporarily disabling Flash on various browsers. Doing so eliminated the “whited-out” effect entirely!

In other words, visitors without Flash never encounter the problem I thought they would. The only time this is ever a problem is when a dummy SWF file is uploaded during testing. But disabling Flash on my machine is a better method of testing alternate XHTML content anyways, and doesn’t result in the problem of “whited-out” alternate content.