Hit Bug in Firefox and Flash

Here's an interesting problem that I ran into. I had a Flash movie sitting in an absolutely positioned div. In testing, there were times where a portion of the Flash movie was sitting too high and was actually positioned partly off the page. In this situation, the "live" area to click on a button within the Flash movie had shifted by the amount that the movie was offset. In other words, if the Flash movie was off the top of the screen by 20 pixels then I would have to position my mouse 20 pixels below the button in order to click on it.

The other interesting issue with this is that once you scroll down and scroll back, the hit area had corrected itself. The only solution was to make sure that no portion of the Flash movie ever appeared off the page.

Published July 08, 2004 · Updated September 17, 2005
Categorized as Other
Short URL: http://snook.ca/s/174

Conversation

58 Comments · RSS feed
bibi said on October 26, 2004

I've got exactly the same problem...

All my flash websites are unusable under firefox (the best browser) !

erock said on March 06, 2005

I have the same bug on www.red-apple.nl . Don't have any idea how to get rid of it.....

I'm not using a layer but a frameset consisting of two pages. The Flashpage contains a table with the SWF contained in it. All the hit areas shift downwards....

Help if always welcome....

greenwire said on August 29, 2005

I've just ran into this problem and can't find any information on how to fix it.
The nightly builds of firefox also have the same bug.
Has anyone found a solution?

greenwire said on August 30, 2005

Quick followup to post some new info...
It appears that its the overflow:auto property that is causing my problems.
Basically, if you have a flash movie in an absolutely positioned div, with overflow:auto on, the hit areas will be out by the same offset as the top-left corner of the div.
Removing overflow:auto fixes this, but kills your scrollbars.
This bug happens on:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.10) Gecko/20050716 Firefox/1.0.6
and:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20050603 Netscape/8.0.2

although apparently not on linux versions.

greenwire said on August 30, 2005

Example: http://www.riffmasters.co.uk/userprofiletest3.php

Jordan said on October 05, 2005

I've noticed a similar problem. I have an absolutely-positioned DIV whose HIT area is lost when positioned over certain elements of my page.

I don't get why it's happening, and the suggested fixes have no effect. Is Firefox aware of this bug?

Jordan said on October 05, 2005

BTW, I'm NOT using overflow:auto or any other overflow setting.

My style:

z-index:800;top:90px;padding:0px; left:490px;visibility:visible;position:absolute;width:300px;height:500px

Changing the z-indexing has no effect, either.

Thomas said on October 11, 2005

I have the same problem too! With a normally positioned div, no absolute positioning or anything.

The condition that triggers the bug seems to be a flash movie that's higher than the visible area of the browser.

One thing I found out is that it only happens with wmode="transparent" and wmode="opaque". wmode="window" works fine. Doesn't help me though :(...

Erock said on October 14, 2005

I tried to only use a table to hold my SWF, but STILL the hitareas go wrong... they move UP when my scrollbar comes into play.

d~l said on October 14, 2005

I found this thread while trying to troubleshoot a similar div problem.

Best illustrated if in Firefox browser you go to the example link posted above ..

http://www.riffmasters.co.uk/userprofiletest3.php

Now right click on the embedded Flash movie .. then choose "Settings"
Macromedia Flash Player Settings panel appears ..
but here is the catch .. try to close it! It is stuck!

Works o.k. in IE.

...

The problem I'm researching is placing a large movie in a smaller area, clipped div.

If you right click and bring up the Macromedia Flash Player Settings panel, the clipped div area can hide the close button .. making it impossible to close.

Since Settings Panel cannot be disabled .. one workaround is to position the large Flash movie so that it's centre aligns with the centre of the div area.

This ensures that the Flash Player Settings is also centred.

The actual view position might then need to be offset within the movie.

Linker said on November 17, 2005

Same thing here. I had delete the wmode=transparent parameter.

FF bug or F bug? What do you think?

nobby said on November 23, 2005

thank you so much Thomas - allthough I'll have do do a redesign to work without the wmode. I'm working on a Flash-Navigation in a div layer that is repositioning itself when you scroll, so it's always going to the same position. All hitareas of my buttons didn't work with the wmode and I was looking weeks to find an answer for that.

I will post the site when it's online.

bye

netdragon said on January 09, 2006

This is a Flash 7 memory issue, and you need to noCache the .swf so that Flash doesn't try to internally store it, otherwise the memory will get corrupted. For instance, if calling myFile.swf, call it (with javascript) as document.write('< embed src="myFile.swf?noCache='+new Date().getTime() + '" ...

You can also do that kinda thing server side.

netdragon said on January 09, 2006

Sorry, my comment got cut off. Use document.write( ... embed src="somefile.swf?noCache='+new Date().getTime() + '" ... );

Fill in the dots with the needed stuff

Javacado said on January 09, 2006

I feel your pain.

I should mention that this issue with the hit area only happens on PC's and not Mac FF.

Chris Murphy said on February 16, 2006

Been having this same bug with my flash site -- tore out a few tufts of hair trying to figure it out. Note to self... check this site first before any tearing.

bona said on March 28, 2006

After several tests I succeeded in avoiding the problem: I call a function which changes the style of the element which gene the use of the swf.
when I do not need more my flash I change again the style.
for example :

function changeStyleOverflow(oName,newValue){
var o = document.getElementById(oName);
if (o) o.style.overflow = newValue;
}
// before
changeStyleOverflow('divName','hidden');
//after
changeStyleOverflow('divName','auto');

Alexandru Mihai Birsan said on May 07, 2006

I've been doing some reseach on this and I found out that the bug gets triggered only when both upper and lower sides of the Flash object are cut off the viewport. Also, the "overflow: hidden" doesn't work for me.

Has this been reported to Bugzilla and Adobe?

glpunk said on May 25, 2006

"The other interesting issue with this is that once you scroll down and scroll back, the hit area had corrected itself. The only solution was to make sure that no portion of the Flash movie ever appeared off the page."

Right Now, I'm Having the same problem, can anyone resolve?

said on June 08, 2006

im having the same problem with a flash movie that is 1000 px high. When you scroll the browser down to the bottom and try to click on the flash movie, the _xmouse coordinates and the _ymouse coordinates are off by the exact amount scrolled.
Not happening in Ie(pc) or safari but its happening on FF (mac) firefoc(pc).

any ideas?

said on June 08, 2006

heres a similar post
http://www.kirupa.com/forum/showthread.php?p=1867926&posted=1#post1867926

said on June 11, 2006

I just needed to remove the Transparent attribute, and bingo!
It works!

glpunk said on June 12, 2006

Yes, I know, but in my case, I need transparent attribute.

erik van nieuwburg said on June 13, 2006

I also needed the transparent attribute due to rounded corners and all. Finally i decided to stop using it and generate my tiled background inside Flash. With Flash 8 you can now do this using the "BitmapData" class. It resides inside "flash.display.BitmapData"

////////////////////////////////

Here's an example:

import flash.display.BitmapData;

var tile:BitmapData = BitmapData.loadBitmap("tile4");

function fillBG()
{
this.beginBitmapFill(tile);
this.moveTo(0,0);
this.lineTo(Stage.width,0);
this.lineTo(Stage.width,Stage.height);
this.lineTo(0,Stage.height);
this.lineTo(0,0);
this.endFill();
}

fillBG();

////////////////////////////////

Hope this could be of any use. Good luck

drted said on June 27, 2006

Many thanks to Thomas #8 for the wmode workaround to this bug.

Joshua Harvey said on July 13, 2006

So to fix this problem, I've found if you split your table into more than 1 cell, the problem disappears. So hopefully that will work for you as well!

Junior said on August 05, 2006

Wow! A great discussion that actually helped me too! LOL Since I am using a white background, I was able to eliminate the wmore="transparent" and get away with the easy fix. I am layering all of my elements within the main Flash swf itself through loadMovie functions.

Chris said on August 15, 2006

I had the same problem as most of you when I THOUGHT I needed a transparent flash movie to work in firefox. However, my problem was resolved by me making the background of the flash file be the same as the HTML file. They don't clash since i've used an image that is a simple gradient down image (darker at top, lighter as you go down the bottom) done in photoshop. It didn't add much to the overall size of the swf file either. I searched long and hard for a fix otherwise, rather than a work-around like i did and i found nothing. I even posted it on experts-exchange.com and I had no luck.

Joshua Harvey said on August 23, 2006

If you use the base level cell it breaks, I think it has problems registering pixel offsets in FF and when you split your cell it puts it in a sub level of the original cell, which I'm guessing forces proper pixel offsets and gets it working. Maybe a window with a subcell without splitting it would be the best option...??

Solution? said on August 24, 2006

Hey There, I was battling this problem all night and finally just made the marginheight for the html body 1 px. Everything works well in all browsers (including firefox) and few people would notice one pixel of blackness. Hope this helps!

Gordan said on August 28, 2006

Firefox bug: using flash with wmode=transparent on the "absolute" layer

Just make css like:

#Layer3 {
position:absolute;
width:....px;
height:....px;
z-index:....;
left: ....px;
top: ....px;
visibility: visible;
background-attachment: fixed;
background-image: url(images/spacer.gif);
background-repeat: no-repeat;
}

inside body:

div id="Layer3"... your flash goes here.../div

Resolved:
after scrolling flash on the layer will react o.k.
but...(?)

LeadFoot said on September 10, 2006

This bug is reported at firebug database ( https://bugzilla.mozilla.org/show_bug.cgi?id=342096 ) and it seems has no solution yet, but I've been working with FireFox 2beta and can't reproduce the problem... already solved in beta version? I hope so :)

neros9 said on January 10, 2007

My flash movie scrolls up and down on my page with the scroll bar,(i.e., when I scroll up and down the movie follows - annoying) - Does anyone have an answer?

neros9 said on January 10, 2007

BTW: the previous request was based upon use in the FIREFOX Browser.

Ryan said on February 06, 2007

wmode=transparent
single cell table
Javascript embedding inside div tag

1 PX margins fixed my problem!!!! Dumbest fix I have ever heard of.

Thank you 'Solution?'

Chris Korhonen said on February 18, 2007

Neros9: No solution to the scrolling issue unfortunately. It occurs because the browser isn't sure what has focus, so assumes the page.

This still seems to be present in the Firefox 3.0 builds, and because the bug seems to exist within the no-mans-land between browser and plug-in, the chances of it being fixed decrease!

bzin said on February 23, 2007

Thanks to Solution?

The problem was only with the margin in CSS, I change it to only to

<style type="text/css">
body {
margin: 0px;
}
</style>

And it works just fine.
The problem was that I had:

<style type="text/css">
body {
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}
</style>

This can only be a bug in Firefox

Christopher said on March 10, 2007

There also appears to be another bug. If you right click for the flash context menu and select zoom in, you open a save bookmark window in firefox. I can't figure out how to zoom in.

Anthony said on March 12, 2007

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.

http://www.onsitevideos.com/

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.

Alfred said on March 13, 2007

That was very useful. Thanks

Jason said on April 03, 2007

Sorry for the off topic post. I just want to test out this forum programming. Seems awesome.

radScientist said on April 25, 2007

It looks like Onsite Videos has solved the problem, because their flash video is always absolutely being positioned at the bottom of the page.

For this issue to show up in firefox 1.5 it appears that Both the top and bottom portion of the flash file has to be clipped by the browser window. It's a smart workaround - at Onsitevideos.com the bottom portion is not being clipped.

Thiago Machado said on April 26, 2007

To solve this problem for all DIV tags are floating, you need remove position:fixed (if exitsts)

this problema happend when a flash object are float with some directions defined, left, top, bottom or right.

i used it in www.submarino.com.br in right bottom

Daniel Sullivan said on May 08, 2007

Hi Guys, I just had a problem with my flash movie in firefox. Hope this helps :)

In all other browsers the movie worked fine, even in safari :) But Firefox was a shit!

I went through the style sheets, and the html code to try and eliminate any obvious problems that would cause my movie to stuff up.

The problem with the movie was only about a 1/4 of the movie's space was being shown properly, ie: instead showing the true movie size of 590 wide by 490 high, it only showed 80 wide by 50 high.

Anyways, I went into the HTML code for the page that had the movie embedded, went through all the different attributes for the flash movie etc, but I nearly fell off my chair when I realised the problem was right there in front of me.

<h1>The FIX</hi>
<h3><The flash movie has 2 sets of height and width attributes.
Often when you insert a flash movie it will set the 'object' tag's height and width to whatever the dimensions of the movie are. But by default the 'embed' tag's hieght and width will be set to 100%.<br>

To fix, simply set the 'embed' height and width attributes to be the same as the 'object' tag's height and width. and always use pixels for your dimensions.

Hope this helps

Thomas Aylott said on May 10, 2007

I'm so happy that other people are having this problem!

I finally figured out the problem and a solution.
I'm doing up an upgrade to the CrazyEgg reports. http://crazyegg.com/demo
The view I'm trying to do absolutely positioned a translucent flash over an iframe.
The hit offset was only seen in FireFox Windows and only for the pixels of the flash that were over the iframe, all other pixels had a normal hit offset.

The fix was to create a hidden fixed positioned iframe between the flash and the visible offset iframe. This effectively offsets all the pixels of the flash to the correct offset of the window since that's what the invisible iframe is positioned to.

The invisible iframe must cover every pixel under the flash and be positioned at 0,0 of your window to make this work. This is obvioously not feally helpful to almost anyone else on the planet :(

su said on June 18, 2007

hi,

i have nearly the same problem on mac.
my div is overflow hidden and 93px high. the flash inside this div is 379px high.
on pc, it is working, but not on mac.

does someone have an idea to fix it?

Marc said on June 26, 2007

Thanks "Solution?"
My problem was with lots of flash elements on one page and dhtml layers over those flash elements. So, I needed to set wmode to transparent, but I also needed to scroll the window.

I used this fix and it seems to be working:

html {
min-height: 100%;
margin-bottom: 1px;
}

Peace.

GermanZ said on July 12, 2007

I have same problem, and solved it by changing flash movie container place in DOM.
I have
div id='myWnd'> swf stuf... /div
And when mouse clicks on this node I'm changing place of container:

document.body.appendChild( document.getElementById("myWnd") );

Container is absolutely positioned, so this trick doesn't do any visual changes. Works good, but still have problem, flash movie is reloading.

elpino said on July 17, 2007

in my case the problem is caused by a transparency filtered IFRAME positioned underneath the abolutely positioned div "fixing" the IE <select> bug (verision 6 and earlier).

Problem is that it eather overlays the flash within the div or shifts it's hit area. I notice that when I right click the flash movie it's context menu appears offset as if the flash was positioned in the top left corner of the browser.

In my case I solve this by setting display:hidden to IFRAME, exclusively to IE (which is the one that gave me the problem in the first place).

OzAtlantis said on July 30, 2007

I think I am having the same issues as all you guys. My firefox flash-mouse interactions do not work at all when overflow:auto is set. Setting the wmode=transparent does allow the flash controls to work but I have a html layer ontop of the flash which I need to use for dragging the flash unit around on the page. When I set wmode to transparent the html layer gets lost even when I have the z-index set to some rediculous amount.

JMCA said on September 14, 2007

I eliminated the DIV I was shoving the SWF file into and stuck it in an old fasioned <td> and it solved the issues I was having/you were having. So try eliminating the div altogether or put the SWF object in a TD inside a fixed DIV. Hope this helps.

Kredi said on September 18, 2007

Today mozilla released Firefox 2.0.0.7 and looks like this problem has gone..
Thank you for the article.

Cancerinform said on October 23, 2007

I have a problem in Firefox with a flash movie either embedded as a movie itself or using another html page and the iframe tags. The site where the movie is, is styled with css and the position is relative with floating. I can see the movie but the button to start does not work. The browser does not recognize that it is a button. It works all fine when the movie is regularly embedded.

Pedram said on October 30, 2007

The information here is more incorrect than it is correct... Please ignore
all of the posts, and just wrap it in a damn iframe, thanx to over half a
dozen of you for completely wasting my time on your useless "solutions"...

Ryan said on November 06, 2007

Had this issue arise on sIFR links. A number of small text areas are replaced with sIFR links, and many are plainly visible on the page when it loads. In FF/2/PC, grabbing the scrollbar and moving the page up or down disables all of those links (or moves their hit areas, rather). Clicking one of the sIFR links re-enables it, but then you have to click on it again to actually follow the link. Totally annoying, as this is the only browser in which that is happening!

Sebastian said on November 16, 2007

Example to fix the DIV Flash overlay on FireFox and wmode transparent:

<style type="text/css">
#Layer1 {
position:fixed;
width:800px;
height:500px;
z-index:0;
left: 100px;
top: 10px;
visibility: visible;
background-attachment: fixed;
background-image: url(images/spacer.gif);
background-repeat: no-repeat;
}
</style>

<div id="Layer1">
your content here
</div>

Adrian said on September 09, 2008

Similar problem, I had a content layer to replace the body, and under this layer I hat an stretched image. At first flash was not able to receive my clicks. Here is the corrected version of my code:

<style type="text/css">
BODY { margin: 0; overflow: hidden; }
DIV.strechBg { position:absolute; z-index:-1; height: 100%; width: 100%; }
DIV.strechBg IMG { height: 100%; width: 100%; }
DIV.content { position:fixed; width:100%; height:100%; z-index:0; overflow: auto; }
</style>

<body>
<div class="strechBg"><img src="images/bg.jpg" alt="" /></div>
<div class="content">
... SWF Object with wmode = transparent ...
</div>
</body>

In conclusion and in my case, overflow: auto; caused the problem and position: fixed; solved it. Now works perfectly in IE6 and FF3

JBird said on October 03, 2008

Thanks to Solution? !!!! This is a bug I have designed around for years. Now I can implement all kinds of ideas I thought I had to avoid.

Wierd fix, but it works. Solution? = genius.

body/html margin: 1px .... sweet!

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.