Flash not transparent in Chrome or Firefox

Question

I'm using Flash 10.3 in Firefox 7 and Chrome 14. I have some HTML and Flash content where the Flash, containing complex vector drawings with a transparent background, is layered overtop of the HTML. I use Flashes wmode=transparent setting to allow the HTML content underneath to be seen through Flash.

My code looks like:

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <object
        classid="D27CDB6E-AE6D-11cf-96B8-444553540000" 
        codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" 
        width="432" 
        height="432" 
        id="myel" 
        align="top">
        <param name="movie" value="myflash.swf" />
        <param name="allowScriptAccess" value="always" />
        <param name="bgcolor" value="#FFFFFF" />
        <param name="base" value="." />
        <param name="wmode" value="transparent" />
        <param name="flashvars" value="mydata" />
        <embed
            swliveconnect="true"
            src="myflash.swf"
            base="." 
            quality="high" 
            bgcolor="#FFFFFF" 
            width="800" 
            height="800" 
            wmode="transparent" 
            name="myel" 
            align="top" 
            allowscriptaccess="always" 
            type="application/x-shockwave-flash" 
            pluginspage="http://www.macromedia.com/go/getflashplayer"
            flashvars="mydata" />
    </object>
    <div>my layered content shown underneath flash</div>
</body>
</html>

In previous versions of the browsers, this worked perfectly. It still works perfectly in IE7/8. However, in the recent versions of Chrome and Firefox, the Flash is no longer transparent, despite my wmode=transparent setting. Why is this?

I've Googled, and there have been numerous bug reports throughout the years of this happening in Chrome and Firefox, yet none of the proposed solutions have worked for me.

Since this issue has only cropped up in recent browser versions, and may be an issue in IE9, I'm suspecting the issue is related to some new interpretation of the tag in these browser's HTML5 support, but I can't confirm that.

How can I get Flash to support transparency reliably, so it can be layered overtop HTML content in Chrome and Firefox?

score 1 · Accepted Answer · answered Oct 25 '11 at 09:42

1

I've did a quick example using your code and a little flash I've created. You can check on:

http://limeintermedia.com/clients/test/myflash.html

And it is working in Chrome 14.0.835 and Firefox 7.0.1

Can you post an example, including your flash?

answered Oct 25 '11 at 09:42

Alex

194
1
2
10

My original code, which I accidentally cleaned up, was slightly corrupt, and had an extra quote before the wmode param in the embed tag. This apparently caused it to be ignored in Firefox and Chrome, and thus not passed to Flash, effectively disabling transparency in those browsers. When I compared by original code to yours, the bug stood out. Thanks for the minimal working code example. – Cerin Oct 27 '11 at 03:00

Flash not transparent in Chrome or Firefox

1 Answers1