Firefox + Mac + Flash + CSS opacity = peek-a-boo
I came across a fun browser bug this morning that I thought I would share. You can’t have a semi-transparent element cover a Flash animation Firefox on the mac.
I had a popup menu that used CSS opacity to make the menu semi-transparent. It was working fine, but then we threw in a Flash header and the Flash would hide any time you moused over a menu item.
Here are some screenshots that demonstrate the bug. The first is how it looks in Safari, the second demonstrates the bug in Firefox, and the third shows Firefox if I remove the opacity attribute from CSS.
The solution: for now, I’ll just have to live without semi-transparent menus (but they looked so good).
I would venture to guess that this is intentional behavior by Firefox. Since Firefox isn’t a native Cocoa app, it doesn’t have access to all the fancy OS X rendering, so it can’t render transparent elements over elements that it doesn’t have control of (Flash), and it just removes the Flash.
8 comments
Interesting. Did you check it in camino?
April 26, 2007 at 10:21 AM
Good point. Camino does the same thing as Firefox, so maybe my theory is wrong and it’s just a bug.
April 26, 2007 at 10:37 AM
I experienced this myself. The site was fine with transparent menus until they wanted to have headlines replaced in-line with Flash headlines. In Firefox on Mac it completely trashes the headlines. But the client wanted the Flash headlines and transparent menus, so they decided to let those Mac people on Firefox suffer. I like it when clients are flexible like that!
April 26, 2007 at 12:52 PM
I had similar experience working with Firefox on Mac; using Thickbox to showcase Flash Videos inside an Ajax window, because of CSS opacity.
Then I came across Jake Olsen post on CSS Opacity and Flash Transparency in Mac Firefox
He recommends using transparent png for Firefox Mac instead of CSS opacity. It worked for me.
April 27, 2007 at 01:52 AM
I cant use a png because the site I’m working on has 2 flash objects on top of each other. they fade in and out by adjusting the opacity with javascript. They only solution I found is removing the type property from the embedded object.
FF will still fade, and in safari at least the object won’t disappear as it does when you do have
type=”application/x-shockwave-flash”
in the embed tag. <!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> <html> <head> <title>Safari Flash & Opacity test</title> <script type="text/javascript"> function start() { document.getElementById(“iwonLogo”).style.opacity = 0.5; } </script> </head> <body> click hereremoving “type=”application/x-shockwave-flash” will stop it from disappearing
and FF can still fade it (removing wmode=”opaque” also stops it, but then it wont fade in FF either anymore).
August 14, 2007 at 03:30 PM
I just hit this today. Thanks for posting! ;)
October 26, 2007 at 01:45 PM
I ran into this problem today with a website I’m producing. Interestingly, Safari on OSX Leopard seems to exhibit similar buggy behavior while Safari 2 and 3, pre Leopard are fine. I’m going to have to say that it’s more a bug with the flash plugin (perhaps in it’s interaction with cocoa) than it is with the browsers in particular.
December 17, 2007 at 03:44 PM
Possible solution to this problem is to server different CSS for the audience viewing the website on MAC (FF and Camino)
Its cumbersome but atleast Users wont suffer.
December 19, 2007 at 10:12 AM
Speak your mind: