Firefox Flash Bug UPDATE
UPDATE FOR: (http://www.findmotive.com/2006/09/27/flash-bug-in-firefox/)
Ok I have created a demo for the Firefox Flash bug Here (http://www.findmotive.com/flashbug).
The expected result is this:
But sometimes the flash will not show and it appears like this:
Usually the first visit to the page in the browser will work, but subsequent visits usually will not or opening the link in a new tab. I have seen this issue in Firefox and Flock.
I have not been able to figure out why this is happening. Anyone’s help would be GREATLY appreciated.
Example
http://www.findmotive.com/flashbug
My name is Noah Everett. I live in Tulsa, OK. I started 
Hi, did you manage to workaround this FF-’feature’?
I’m experiencing the same problems and hopefully you know by now how to deal with it?
thnks, David
I’ve been trying to tackle this problem for three days straight. My current theory is that FF does something flaky when rendering things with position:fixed. The position:fixed seems to cause problems in how FF loads flash movies. It’s worth noting that iframes containing plain HTML/CSS pages render appropriately all the time.
I used to get absolutely no rendering at all of my flash movie in my iframe when I had a mix of divs that were using position:absolute and position:fixed in the parent page. After making them all position:fixed, the problem became intermittent, as described above - leading me to believe that it is something to do with position:fixed.
What is interesting, however, that it does seem to do a half-way render. Flash movies with music in them do consistently play music, while it only intermittently renders the visual portion.
I’ve tried various stabs in the dark in trying to solve the problem, including: delay loading of the Flash movie within the iframe page, and loading the Flash movie directly by setting the div’s innerHTML (using no iframe at all).
Haven’t found a solution yet. Any ideas?
[…] This is an update to: http://www.findmotive.com/2006/10/02/firefox-flash-bug-update/ […]
Ouch! Nobody knows a solution… I tried a lot of combinations and javascript codes. Nothing works by now. I keep trying
I think the issue has to do with the fact that you have a page within a page. If you remove the:
body {
font-family: arial;
}
AND THE:
from the example everything should work just fine…. all you need is the HTML that is actually being inserted in the lightbox. So for this example:
http://www.findmotive.com/flashbug/iframepage.html should only contain:
Flash player 9 is required. Download it here.
var so = new SWFObject(”http://www.findmotive.com/flashbug/test.swf”, “tester”, “300″, “200″, “9″, “”);
so.write(”flashcontent”);
I hope this helps.
I’m experiencing the same thing with a design I’m working on. I believe it has to do with simultaneously using position:fixed and opacity setting. See if the code works without opacity.
Okay guys… TWO issues here, not one… took me three days to realize it:
1) Flash + Firefox + Mac + opacity (anything, div, span, over, under) will kill Flash the moment the opacity-setted object enters the rect of the flash. Workaround is to identify FF+Mac in your HTML tag as a class, then use transparent PNGs instead of opacity settings for your tag’s backgrounds:
.foo {
background-color: Red;
opacity:.50;
}
.firefoxmac .foo {
Okay guys… TWO issues here, not one… took me three days to realize it:
1) Flash + Firefox + Mac + opacity (anything, div, span, over, under) will kill Flash the moment the opacity-setted object enters the rect of the flash. Workaround is to identify FF+Mac in your HTML tag as a class, then use transparent PNGs instead of opacity settings for your tag’s backgrounds:
so, instead of
.foo {
background-color: Red;
opacity:.50;
}
you should use:
.NotFirefoxMax .foo {
background-color: Red;
opacity:.50;
}
.IsFirefoxMax .foo {
background-image: url(../Red50.png);
opacity:1.0;
}
This isn’t perefect, as text and borders will still be opaque, but it’s a good start at least.
2) Second issue: changing the position-type of an SWF or any of its parent containers (ie position:relative to position:absolute) will cause some SWFs to reset on certain browsers — Firefox (mac and win) being one of them. I don’t know of any workaround here. Some SWFs will be able to handle this, others will not, depending on how they are written. I leave it to other brave souls to figure out how tro get a movie to detect the condition and correct for it.
Also, regarding issue #1, I actually got it to work once, and I think the solution involved any of several unterminated divs that contained/sibling’d the transparent div. Sadly, we “fixed” the other problems, triggering the no-flash bug, and we have not been able to figure out how to get back to that state
I’m having a similar problem with dynamically changing the opacity of a position:fixed element, and it sure is not limited to Firefox, or even just Gecko browsers. Haven’t tried a Windows comp yet, but Opera 9.26 (the best! www.opera.com), Camino 1.5.4, Firefox 2 (not gonna bother to check specifically what version), and Safari (2, presumably) on Mac are all refusing to change the opacity of a position:fixed element (an overlay div, in my case) more than twice (it’ll switch the first time from clear to partially transparent, then back to totally clear, and then all scripts pretty much freeze). While I can get around this with display:none and display:block, I can’t animate the div fading in and out.
I am using Yahoo UI and more especially TabView.
I tries to put a flash content in one of the tabs.
The problem is that on Firefox and Opera, when the Tab containing the Flash becomes the selected one, the Flash is reset/reloaded.
Yahoo TabView seems to use display:none and display:block.
Any workaround ?
I had similar trouble with website I was working on.
I had background image with position:fixed bound to the bottom of the page. On top of the page was flash content banner. Resizing page small enough on FF the background image was rendered over flash (but not on top of other content) making flash animation disappear.
Solution to my problem was to give this background image position:static and some negative margin so it would still be bound to the bottom of page.