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.
Conversation
I've got exactly the same problem...
All my flash websites are unusable under firefox (the best browser) !
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....
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?
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.
Example: http://www.riffmasters.co.uk/userprofiletest3.php
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?
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.
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 :(...
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.
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.
Same thing here. I had delete the wmode=transparent parameter.
FF bug or F bug? What do you think?
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
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.
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
I feel your pain.
I should mention that this issue with the hit area only happens on PC's and not Mac FF.
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.
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');
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?
"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?
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?
heres a similar post
http://www.kirupa.com/forum/showthread.php?p=1867926&posted=1#post1867926
I just needed to remove the Transparent attribute, and bingo!
It works!
Yes, I know, but in my case, I need transparent attribute.
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
Many thanks to Thomas #8 for the wmode workaround to this bug.
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!
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.
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.
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...??
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!
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...(?)
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 :)
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?
BTW: the previous request was based upon use in the FIREFOX Browser.
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?'
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!
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
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.
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.
That was very useful. Thanks
Sorry for the off topic post. I just want to test out this forum programming. Seems awesome.
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.
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
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
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 :(
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?
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.
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.
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).
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.
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.
Today mozilla released Firefox 2.0.0.7 and looks like this problem has gone..
Thank you for the article.
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.
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"...
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!
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>
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
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!