Flash wmode="transparent" not working in IE

New Here ,
Sep 12, 2011 Sep 12, 2011

Copy link to clipboard

Copied

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>

<body style="background-color:#CC6633;">
    <!--
    ATTEMPT 1
    -->
    <object width="450" height="375">
        <param name="movie" value="flash/sun.swf">
        <param name="wmode" value="transparent" />
        <embed src="flash/sun.swf" width="450" height="375" wmode="transparent"/></embed>
    </object>

    <!--
    ATTEMPT 2
    -->
    <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" />
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="flash/sun.swf" width="450" height="375">
                <param name="wmode" value="transparent" />
            </object>
            <!--<![endif]-->
        </object>
    </div>
   
    <!--
    ATTEMPT 3
    -->
    <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.

Views

30.2K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Sep 12, 2011 Sep 12, 2011

Copy link to clipboard

Copied

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

Adninjastrator

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 15, 2011 Sep 15, 2011

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Sep 15, 2011 Sep 15, 2011

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 16, 2011 Sep 16, 2011

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 11, 2011 Oct 11, 2011

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 04, 2011 Nov 04, 2011

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Dec 21, 2011 Dec 21, 2011

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 11, 2013 Jun 11, 2013

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines