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.
11 comments
Interesting. Did you check it in camino?
Good point. Camino does the same thing as Firefox, so maybe my theory is wrong and it’s just a bug.
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!
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.
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”> Safari Flash & Opacity test 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).
I just hit this today. Thanks for posting! ;)
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.
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.
Hm, this is a frustrating one to fix, because its either all-or-none for browsers. One solution is to use PNG-24’s to create the opacity, and then use conditional comments for IE6 which doesn’t understand PNG-24 opacity. There are 2 possible IE6 fixes, either using MS background image filters, or doing it without the PNG and adding a MS opacity filter.
Hi All,
I am facing issue in Mac safari browser.
I made this flash and the background is following mouse. http://www.designurimagination.com/Projects/russia/russia-new2.html
It is fine in all browsers but when i see it in MAC+safari it has error. The moment you click outside browser and come back to the browser thebackground disappear. I tried all the solution I know till date.
Can anyone help me understand the real problem? Please let me know the solution.
thanks Arpita
If anyone is using thickbox, on a mac with firefox:
Thickbox 3.1 has addressed this issue and it is fixed in the code. HOWEVER, don’t forget to download (and properly link up) the png image that is referenced within the thickbox stylesheet!
Get the png here: http://jquery.com/demo/thickbox/thickbox-code/macFFBgHack.png
Speak your mind: