View Full Version : mozilla/firefox wmode="transparent" click-through

12-08-2004, 12:03 PM

Yet another issue with this finder.

I have managed to get layers to swap depth when a user clicks off the swf and I have managed to send a variable directly to flash, via javascript, to make it close any open menus.

Works fine.


I still have a click-through issue in Mozilla/FireFox. IE works fine and the user can successfully click on a link beneath the transparent areas of the flash movie.

In Mozilla, the links remain inaccessible.

This browser issue pains me, big time. Every single thing I try with this project gets bogged down with this cross-browser crap. I wish we'd conceived it differently. :o You live & learn.......

Can anyone shed any light on this? I've done some searches but come up with nothing. Is there an alternative way of allowing Mozilla to register clicks underneath a wmode="transparent" layer?

var result:String;
var type:String = "brick"
result = "whimper";

06-15-2005, 04:08 PM
I'm trying to do the same things as well. We were looking at Yahoo.com today (6-15-05). They are showcasing a new add for the Mitsubishi Eclipse which allows you to drive a car around the screen.

In the past, we have done similiar flash banners like this, but we have never been able to allow the HTML links below to remain clickable. It would seem that the entire flash movie, whether it had content in it or not, would prevent the clicking of any links underneith.

Somehow, the guys at Yahoo have figured this out.... and we can't seem to decipher their approach.

I have read some things about toggling the focus/blur states of the flash object and swaping depths, but it looks like Yahoo didn't do anything like this. Unless, we can't find it.

Any thoughts on this would be appreciated!!


06-16-2005, 02:22 PM
as far as I am aware there is no easy solution - some firefox/mozilla browsers do not support wmode=transparent.

An alternative would be to do the area which will be used by flash in flash - if there are layers underneath that need functionality, then add the content to the flash doc.

Sorry I can't be more helpful - but wmode just doesn't work for these browsers. see http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_14201

for a list of browsers which do support wmode


06-16-2005, 02:33 PM
Yeah, we noticed that Yahoo didn't support the banner on Mac platform. But, it worked very nicely on Win IE, and it used wmode to set the transparency, however, we just couldn't figure out how the links on the Yahoo page were still clickable _through_ the flash.


07-21-2005, 12:51 AM
I guess this is a variation gripe with windowless transparent mode...because it sounds like there just isn't any solution out there:

In Firefox/Netscape I have found that my flash buttons and links do not scroll with the browser scrollbar. So if user does page down, the position required to click the button becomes offset by the amount the page is scrolled. Rather like a bullet to the head, eh?

Is that ridiculous or what?

07-21-2005, 04:35 AM
I had that problem with a navbar I had made. Plus it was never really transparent for some Hexidecimal color backgrounds. The only suggestion I have is to go to Mozilla.org and tell them about this problem. You know, go straight to the source and maybe Firefox 1.0.5 will have a better transparency as well as a few other interaction limitations (Seems to have trouble running large Java based apps and surfing the net at the same time).

08-01-2005, 09:29 AM
Mozilla uses the netscape API's for plugins. My guess is that if a fix for wmode in firefox is possible, it would be up to macromedia to fix it in the flash plugin. But it could very well be possible that due to the design of the API's it is only possible to do this with activex objects, in IE (where the flash player is an activex control).

I had so many headaches with wmode that I just gave up on it. Too buggy.

08-03-2005, 02:45 PM
probe this

<embed src="/_share/swf/menu.swf" wmode="transparent"quality="high" ... ></embed>

here is the link


08-03-2005, 02:49 PM
Yes, firefox does do it, but not (according to the MM link I added) all versions.

08-08-2005, 06:43 AM
You also get a major performance hit from using wmode transparent in firefox, even when it does actually work.

08-28-2005, 03:59 PM
The way to solve the problem, is to put a row above your flash movie and also a row below your movie and set the height to 100% in your bottom td like this:

<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<td height="0"></td>

<td width="100%" height="600">
<OBJECT codeBase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
height="600" width="100%" align="middle" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
<PARAM NAME="_cx" VALUE="27464">
<PARAM NAME="_cy" VALUE="15875">
<PARAM NAME="FlashVars" VALUE="">
<PARAM NAME="Movie" VALUE="media/flash/controller.swf">
<PARAM NAME="Src" VALUE="media/flash/controller.swf">
<PARAM NAME="WMode" VALUE="Transparent">

<PARAM NAME="Loop" VALUE="-1">
<PARAM NAME="Quality" VALUE="High">
<PARAM NAME="Menu" VALUE="-1">
<PARAM NAME="AllowScriptAccess" VALUE="always">
<PARAM NAME="Scale" VALUE="NoScale">
<PARAM NAME="DeviceFont" VALUE="0">

<PARAM NAME="EmbedMovie" VALUE="0">
<PARAM NAME="MovieData" VALUE="">
<PARAM NAME="SeamlessTabbing" VALUE="1">
<embed src="media/flash/controller.swf" width="100%" height="600" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" wmode="transparent"> </embed>

<td height="100%"></td>

Hope that helps!


01-12-2006, 01:54 PM
This doesn't solve the "clickthrough" problem. Actually using a table prevents even IE from catching the clickthrough's. Placing the flash directly in a positioned div and using wmode is the only way to acces html links behind the flash, and only works in IE, or am I wrong?

01-18-2006, 10:41 PM
about the mitsubishi ad that someone had commented about earlier-- yahoo didn't do anything special to make the links under the wmode work. wmode=transparent just WORKS in IE. but all the yahoo links under the transparent areas dont work in Moz, which leads to a bad user experience, and which is why you may have seen a static gif/jpg version of the mitsubishi ad on firefox.

well it's not that wmode=transparent isn't supported Moz, because you do see transparency. i just think that it may either be a Moz bug or a flash plugin bug. i've looked around on the firefox bugzilla site to see if any about it has been resolved, but it doesn't look promising right now. it just keeps redirecting me to similar bugs which are still unresolved or really aren't related to this bug.:mad:

01-19-2006, 06:36 AM
I think it's more like a limitation of the netscape plugin API. It may not be technically able to pass on mouse click events to the browser. Flash on IE is an activex object, so it makes sense it behaves more like a normal browser control.

01-30-2006, 10:56 AM
1st post here...

Well, I recently needed to use a floating flash ad on a page, and then discovered this annoying bug in Firefox.

Actually, the bug seems to be with the layers, something that prevents links behind an absolute positioned layer to be clicked, even when the flash is removed and the layer is empty.

My solution was to do a browser check script. If IE is detected, I document.write the layer+flash code. No IE, no layer and no flash.

Hope that helps...

02-22-2006, 12:55 PM
did you find a solution.

I got a similar problem.

In my case I got a <div id="nav"> overlapping a <div id="content">. Both div's got a flash movie, but in firefox my flashmovie in <div id="content"> doesn't react :(

Are there any hacks been found after a year???

03-09-2006, 08:05 AM
yahoo ads really rock..i wish that this expanding ad secret would be revealed soon by flash gurus..from yahoo. :)

03-24-2006, 09:32 AM
I don't know if this will meet everybodies needs, but it will help in some cases. I had the problem that I wanted a banner to be able to open over an HTML page and then close again.
The trick is to put the Flash in a div tag, that starts out sized to the minimum banner size. Then when you open the Flash banner, you use Javascript to resize the div tag. When you close the banner, you resize the div back to the minimum banner size.

I found all the javascript I needed here:

You can see a working sample here:

The original banner is 550x165.
It opens up to 550x600
Take a look at the HTML code for teh javascript/div tag, and the code in Flash looks like this:

This won't work in situations where the swf always have to cover the HTML, but maybe some combination of it would do the trick? (ie. if you had a car in the .swf file driving across the HTML page, you could send new x and y positions to move the div tag around)

03-10-2007, 04:46 AM
I've also been running into this problem and it seems to be a common one with no solution. However, I did find a site that somehow seemed to pull it off. They play a transparent flash video that is hovering over content and the buttons still work in Firefox.


I'm not sure how they pulled this off but if anyone has any ideas I would love to hear them. My guess is they might have used javascript rather than css[position:absolute (fixed...etc)] to hover the SWF.

They try hard to hide their code and it's definitely hard to read through... Hope one of you geniuses can figure it out and share the love.

04-23-2007, 06:22 PM
here an example where btn, and mouse_stuff works with wmode=transparent in firefox.I did not test accurately the form stuff...

06-25-2007, 08:25 AM
This workaround may help us to cover this issue.
- Two Divs (positioned absolute and contains flashes)
- these divs width and height are same as flashes.
- Two flashs : one is original (say 460x400) and the other is resized one (460x60)
-small container div's display is 'block' and larger container 's display is 'none'
-with javascript capture mouse position.
- if mouse is in the zone then swap the display properties for divs.
- if mouse is outside to the zone. then go back to the original state. (here, you may wait to stop animation then take action)
[note: smaller flash is same flash with original one except it is cropped to desired size]

I made a simple example and it seems ok.

06-27-2007, 05:15 AM
There has got to be a (non hacky) solution for this bug... it's a pretty major showstopper for flash developers.

I'm in the process of developing a video content delivery system that requires the ability to click through a flash wrapper to interact with embedded quicktime video controls, and this bug is causing some pretty serious problems.

I'll ask around the office tomorrow and see if any of our flash developers have a solution... if not, I'll get on the horn with my contacts at adobe and see if a solution exists. If one doesn't, I may be in a position to stress its importance.


10-09-2007, 04:10 PM
?? So have you heard back from adobe ??

10-09-2007, 05:26 PM
It seems to be an issue with firefox, not with the flash plugin. And I've not heard of any plans by firefox to fix it any time soon. Firefox also has the same issue with divs, so it is a pretty large problem.

10-09-2007, 05:49 PM
Thanks for the heads up. I'll keep trying.

10-09-2007, 05:57 PM
You might want to check this thread...


And especially post #24, where the files are attached (or links posted)...

11-16-2007, 09:17 AM
hi everyone. ı build a dropdown menu in actionscript 3. sample
but ı have got some problem please help me. firstly;
ı can click a link under the dropdown menu on internetexplorer 6 and 7 but ı cant clik firefox and opera. ı did wmode=transparent but this is good for iexplorer. what do ı do???
if ı dont do this ı have got second plan
how can ı resize movie in actionscript for example
when onmouse over movie height= 557px onmouse out movie=70px how can ı do these
thanks for your responds
(sory my english is not so good)

09-22-2008, 11:17 PM
This is strange, and I'd never trust it otherwise, but damned if it didn't work for what I needed. Even though I set my Flex3 app to 100% width and height, I wrapped it in a DIV that I set to:


The z-index is the sauce. Works great in IE and Netscape. I still get fullscreen mode, and I just make sure the sections of my page with Flex3 components are blank so they bleed through, yet they are still rendered on top of the background images. The only side-effect is that all the other HTML components now show up on top of the Flex components, so if you really need them to both a) contain href links and b) show up below the Flex3 components (such as using fullscreen mode + wmode:transparent for large-scale Alert.show()'s), then you have to write code in your Flex3 that calls Javascript to manually change the z-index value of the HTML elements you want rendered below your Flex when Flex is more important, and vice versa.

09-28-2008, 11:07 AM
you can go there :

including sources.

10-21-2008, 05:52 PM
Dudes, the buttons in my flash didnt work in FF3. I found out that it works fine if I remove the css property overflow:auto, that I had assigned for my body and html tags. with no overflow property, it seems to works just fine in every browser i tried.

Hope it helps.

10-27-2008, 09:35 AM
Hmmm I donít have overflow:auto anywhere... still canít click on links under the transparent flash in FF3..

I also canít believe that Iím starting to say things like "dam FF" and "I hate you FF" and also a staggering " IE is so much better" ... Iím off to counselling now... Iíve changed..

10-31-2008, 05:04 AM
I confirmed that z-index:-1; works. Thanks boxofcode!

11-04-2008, 12:58 PM
I confirmed that z-index:-1; works. Thanks boxofcode!

what?! z-index, think that does not solve the clickthrough issue!? pay attention to the topic dude :) well, this special topic exists since 2004, and nobody has come across the click html links/forms/pix through transparent areas in flash using firefox? wow! same for me works in IE not in FF. shall i call the police?

11-10-2008, 01:19 AM
The way to solve the problem

11-28-2008, 10:20 PM
I'm experiencing this exact same problem.

I have some flash snow going over the header of my Web site, but I can't click through to the navigation buttons in Firefox or Safari. Oddly enough, it works great in IE7 (although the animation seems a bit choppy).

Kind of weird, because usually it's IE that sucks, and FF and Safari that render things amazingly.

Here's a link to what I'm talking about:

11-29-2008, 01:55 AM
Oh snap! I just got it to work!


It works in FF3, IE7, Safari and Chrome, and you can click the links that are underneath it!

It doesn't work so well in IE6, but screw IE6. The animation is also a little slow in IE7, but that's because the snow also falls underneath a the top bar, which is a PNG with like 90% opacity.

I did it with the right combination of z-index and position attributes. Basically the the flash is in it's own div, with:

position: absolute;

And the div containing the text is:

position: relative;
z-index: 2;

If you need help with your own site, let me know, I may be able to help.

12-18-2008, 09:35 PM
hey broomstick, about the

position: relative;
z-index: 2;

it won't work in my blog, as in the snow is not in front of the "body". Not sure where's the problem. Maybe you can look it out? (View the source codes via Chrome developer tools)


Or maybe I placed wrongly the div?

12-18-2008, 11:14 PM
I think you might have the two div's z-index's switched
When I switch them, in firebug...it works, with one problem:
you can't click on anything behind the snow.

12-19-2008, 09:08 AM
yea I noticed that too. In fact to make it work all I need is just the z-index for the swf content to make it work as you mentioned. But yea, the problem is still the clicking-through thingy.

Oh, using your method, the clicking-through works with IE (of all the browsers =.=") only.

12-22-2008, 02:06 AM
Oh snap! I just got it to work!


It works in FF3, IE7, Safari and Chrome, and you can click the links that are underneath it!

It doesn't work so well in IE6, but screw IE6. The animation is also a little slow in IE7, but that's because the snow also falls underneath a the top bar, which is a PNG with like 90% opacity.

I did it with the right combination of z-index and position attributes. Basically the the flash is in it's own div, with:

position: absolute;

And the div containing the text is:

position: relative;
z-index: 2;

If you need help with your own site, let me know, I may be able to help.

cool header

01-05-2009, 06:41 AM

I follow the same method,

<div style="z-index: 1; position: absolute; ">flash</div>
<div style=" position: relative;z-index: 2;">text with link</div>

It still doesn't work. May I know anything else that I need to take note?


01-05-2009, 07:56 AM

It works now. Strange, it didn't work when I test with the Dreamweaver embedding tag. It works when I replace it with other embedding tag from the net.

Anyway, thanks!

I will post the link when it's live.


01-30-2009, 02:32 PM
Here is solution:
<div id="flashContent" style="overflow: hidden;">

02-06-2009, 11:29 PM
(before reading, please note that I confused 2 threads together (different forums), and this answer seems really irrelevant but I think it's relevant enough to help some who are browsing by)

What I believe is the best method of doing so, and most SEO friendly. It is fully w3c compliant as well with no errors:

1. Download and place swfobject on your server. (found: here (http://code.google.com/p/swfobject/))
2. Copy the following code and insert it into your header, changing the .swf names accordingly. If your swfobject folder is different, then you'll have to change the path.

<script type="text/javascript" src="swfobject/swfobject.js">
<script type="text/javascript">
var flashvars = {}; var params = { wmode: "transparent" }; var attributes = {}; swfobject.embedSWF("YOURFLASHFILE.swf", "flash", "800", "600", "7", "swfobject/expressInstall.swf", flashvars, params, attributes)
<style type="text/css" media="screen">
object { outline:none; }

3. Change your div information accordingly. This is just an example that I made up, but overall you should keep the id info and stuff in there.

<div id="flash" class="fl">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<td align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600">
<param name="movie" value="YOURFLASHFILE.swf" />

<param name="wmode" value="transparent" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="YOURFLASHFILE.swf" width="800" height="600">
<p>Alternative content</p>
<!--[if !IE]>-->


4. Add CSS information to your stylesheet.

#flash {
width: 800px;
height: 600px;
.flash {
width: 800px;
height: 600px;
#fl {
width: 800px;
height: 600px;
.fl {
width: 800px;
height: 600px;

Umm... I had forgotten what flash ID and Class is so whether or not it's # or . you'll have to play around with it ^^;; But overall, it will work and kill off any dots around the flash file and ensure w3c compliance. Enjoy!

Oh, and if you want to know what any of this means, check out the guide over at GOOGLE Code (http://code.google.com/p/swfobject/wiki/documentation), they will break down swfObject for you. Another note is that the <embed> tags don't really exist, but browser support them. That's why this method is best to use.

05-05-2009, 12:57 PM
Hi, I'm new in this forum and with flash, but I tried this Google swfobject. It works great in IE, the clicking-through is solved, but it is not in Firefox T-T does anyone try it? is another solution for Firefox? :confused:

06-10-2009, 05:39 AM
Firefox 3, How do I stop smart bar from bringing up bookmarks while I type a url? I have my favorite adult oriented websites bookmarked. Is there a way to disable the smart address bar in FireFox 3 from bringing up my bookmarks while I type? If not, can you suggest an alternative?
affiliateelite (http://www.keywordspy.com/overview/domain.aspx?q=affiliateelite.com) ~ affiliateelite.com (http://www.keywordspy.com/overview/domain.aspx?q=affiliateelite.com) ~ adgooroo (http://www.keywordspy.com/overview/keyword.aspx?q=adgooroo) ~ adgooroo.com (http://www.keywordspy.com/overview/domain.aspx?q=adgooroo.com)