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

bug | css | CSS | firefox | flash | mac April 26 2007

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.

Menu in Safari

Menu in Firefox showing bug

Menu in Firfox

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.

posted by brandon | updated April 26th 09:46 AM
comments feed

8 comments

  1. Interesting. Did you check it in camino?

    Slack Slack
    April 26, 2007 at 10:21 AM
  2. Good point. Camino does the same thing as Firefox, so maybe my theory is wrong and it’s just a bug.

    Brandon Brandon
    April 26, 2007 at 10:37 AM
  3. 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!

    Matt King Matt King
    April 26, 2007 at 12:52 PM
  4. 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.

    Lalit Shandilya Lalit Shandilya
    April 27, 2007 at 01:52 AM
  5. 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 here
    This text will fade but the swf will disappear in safari, not in FF
    removing “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).
    <embed src="http://www.visualxtreme.com/pipe-small-flash.swf" wmode="opaque" />
    </body>
    SympathaticSock SympathaticSock
    August 14, 2007 at 03:30 PM
  6. I just hit this today. Thanks for posting! ;)

    Zach Dennis Zach Dennis
    October 26, 2007 at 01:45 PM
  7. 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.

    Liam Egan Liam Egan
    December 17, 2007 at 03:44 PM
  8. 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.

    Chris Chris
    December 19, 2007 at 10:12 AM

Speak your mind:

(Required)

(Required)


(You may use textile in your comments.)

About

I'm Brandon Keepers, a web application developer that likes beautiful code, valid markup and adherence to standards. As a part of Collective Idea in Holland, Michigan, I practice Agile software development primarily using Ruby on Rails.

-86.103171 42.785037

Contact:

more ยป

Syndicate