opensoul.org

Firefox + Mac + Flash + CSS opacity = peek-a-boo

April 26, 2007 code 2 min read

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.

p=.

p=.

p=.

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.

This content is open source. Suggest Improvements.

— @bkeepers

avatar of Brandon Keepers I am Brandon Keepers, and I work at GitHub on making Open Source more approachable, effective, and ubiquitous. I tend to think like an engineer, work like an artist, dream like an astronaut, love like a human, and sleep like a baby.