Flash wmode="transparent" not working in IE

Report · Sep 12, 2011

For the life of me, I can't figure out how to make my swf transparent in IE. I've tested in Firefox, Opera, Safari, and Chrome on Windows 7 and it works fine, but in IE it is showing a black opaque background. I've seen the same issue on Safari on the Mac.

I now have 3 different variations of the code on the page, all 3 variations being transparent in Firefox, Opera, Safari, and Chrome on Windows 7, and all 3 variations NOT being transparent in Internet Explorer.

For 'attempt 2', I'm using swfobject which in theory should generate the correct code.

Page link is http://www.bikramyogabrighton.com/index_test_swf.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test page</title>
</head>

<script type="text/javascript" src="/js/swfobject/swfobject.js"></script>
    <script type="text/javascript">
        swfobject.registerObject("myFlashSun", "10.3.0", "/js/swfobject/expressInstall.swf");
    </script>
    <div id="flashsun">
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="450" height="375" id="myFlashSun">
            <param name="movie" value="flash/sun.swf" />
            <param name="wmode" value="transparent" />
            
            <object type="application/x-shockwave-flash" data="flash/sun.swf" width="450" height="375">
                <param name="wmode" value="transparent" />
            </object>
            
        </object>
    </div>

    
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="450" height="375" id="navigation">
     <param name="wmode" value="transparent" />
     <param name="allowScriptAccess" value="sameDomain" />
     <param name="movie" value="flash/sun.swf" />
     <param name="quality" value="high" />
     <param name="bgcolor" value="#000000" />
     <embed src="flash/sun.swf" quality="high" bgcolor="#000000" width="450" height="375" name="start" allowscriptaccess="sameDomain" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object>


</body>
</html>

Any help much appreciated.

Report · Sep 12, 2011

Looks exactly the same in IE or FF to me.... tested on 2 different machines, Windows Vista on one, Windows XP on another.

Adninjastrator

Report · Sep 15, 2011

Hi adninjastrator,

Thanks for taking the time to look at this.

When you say they are exactly the same, do you mean they all have the opaque black background? Or transparent with the page background color showing through?

Can you see what might be wrong with my code? Or is it possible that the SWF itself could have some wrong setting?

Cheers,

b

Report · Sep 15, 2011

All 3 examples seem to render just fine in IE and FF.

See comparison photo:

http://www.cidigitalmedia.com/web_devel/background.jpg

If not working for you, try clearing your cache to remove any old, non working versions.

Test on some other machine besides yours.

Code looks fine and seems to work.

Best wishes,

Adninjastrator

Report · Sep 16, 2011

Hi Adninjastrator,

I tried clearing the cache and making sure I was using the latest version. Even so, I'm still seeing the opaque background on Internet Explorer version 9 on Windows 7 64bit and on Safari on the Mac OS X Lion.

I'm wondering if it might be the swf itself. I guess the next step is to check another transparent swf in the same page and see what kind of results I get. I can't see what's wrong with the code, so it might somehow be the swf.

Thanks mucho, Adninjastrator. I appreciate your effort in helping me thus far.

Cheers,

b

Report · Oct 11, 2011

I have the exact same problem and I can reproduce it. It came with the new Flash Version 11.0.1.152.

Apparently if you put a php or html file in an iframe you will get problems (black background) with Flash 11, IE 8 and IE 7, wmode=transparent.

The .php/.html-file is loaded with a javascript jQuery function into the iframe, the iframe is made visible, gets a height and width with an animation(everything is done over the jQuery function) and it is packed into quite alot of tags so it is hard to find out where the error lies.

Just putting a .html into an iframe with normal javascript doesn't seem to cause this issue.

IE 9 and other Browsers don't have this problem.

If I look at b3vegans HTML, it will show everything correctly in IE 8, which means, since I don't have the .swf-files, that the only thing I see is the orange background of the HTML-Body. But if I load it in my .php in an iframe the black boxes appear where the flashes would be.

EDIT: So I found now the issue for me. The jQuery function .animate, seems to make the background black for transparent flashes inside the enlarging html-container. Also it seems like the only thing hurting the flashes is the "width" and "height" altering parts.

Cheers,

Khazar

Report · Nov 04, 2011

Please vote to fix this issue:

https://bugbase.adobe.com/index.cfm?event=bug&id=3019125

https://bugbase.adobe.com/index.cfm?event=bug&id=3017111

https://bugbase.adobe.com/index.cfm?event=bug&id=3018116

Notes:

1- Using Internet Explorer 9 + Flash Latest Version (11,0,1,152)= Problem with Flash (Transparent become Black)

2- Using Internet Explorer 9 + Flash Older Version (10,3,162,28)= Flash is OK

3- Using Internet Explorer 8 + Flash Latest Version (11,0,1,152)= Flash is OK

Report · Dec 21, 2011

Everything worked perfect on my own websites (http://www.idle-city-else.org) untill I was forced to install IE9 on my main computer. Maybe we should ask the whizzkids of Microsoft to fix the problem?

Report · Jun 11, 2013

You need to add the wmode="transparent" parameter for IE. I stuck it after the height/width parameter and worked in IE 9

Adobe Community

Flash wmode="transparent" not working in IE