309790 - Absolutely positioned block element with opacity layered over Flash causes Flash object to disappear

Status: RESOLVED WORKSFORME

(Firefox :: General, defect)

Description

[Aaron Fowler]

User-Agent:       Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8b4) Gecko/20050908 Firefox/1.4
Build Identifier: Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8b4) Gecko/20050908 Firefox/1.4

Layering an absolutely positioned block element with CSS opacity of less than 1
over a Flash object causes the the Flash object to become invisible.  The Flash
object must have its wmode set to transparent.  Removing the opacity results in
correct rendering.  Removing the wmode=transparent results in a visible Flash
object, but the block element is shown behind it, even if the z-index of the
element is higher than the Flash object.

Opacity On: <a
href="http://tisch.nyu.edu/page/opacityon">http://tisch.nyu.edu/page/opacityon</a>

Opacity Off: <a
href="http://tisch.nyu.edu/page/opacityoff">http://tisch.nyu.edu/page/opacityoff</a>

This was first noticed on the following page, where the "About Tisch" dropdown
menu slightly overlaps the Flash movie: <a
href="http://www.tisch.nyu.edu/">http://www.tisch.nyu.edu/</a>

This bug does NOT apply to Firefox 1.0.x on Mac or Windows. This only applies to
Firefox 1.5 on Mac OS 10.4.2.  I haven't tested on Windows or other systems.

Reproducible: Always

Steps to Reproduce:
1. Embed a Flash object with wmode=transparent in page
2. Absolutely position a block element over the Flash object
3. Set CSS opacity on block element to less than 1

Actual Results:  
The block element is shown correctly, but the Flash object is invisible.  The
Flash object still has clickable links and the sound works.

Expected Results:  
The block element should be layered (with opacity) over the visible Flash object.

Comment 1

[Frank Wein [:mcsmurf]]

*** Bug 309791 has been marked as a duplicate of this bug. ***

Comment 2

[Chris Thomas (CTho) [formerly [e-mail] [e-mail]]]

> This bug does NOT apply to Firefox 1.0.x on Mac or Windows. This only applies
> to Firefox 1.5 on Mac OS 10.4.2.  I haven't tested on Windows or other systems.

WFM 1.8-branch SeaMonkey on Windows.

Comment 3

[Aaron Fowler]

This is still a problem in 1.5 beta 2 on Mac OS 10.4.2.

No problems on Windows XP sp2, with either 1.5b1 or 1.5b2.

-Aaron

Comment 4

[juan becerra [:juanb]]

Mozilla/5.0 (Macintosh; U; Intel Mac OS X; ja-JP-mac; rv:1.8.0.8) Gecko/20061025 Firefox/1.5.0.8

I have seen this happen in 2.0 as well.

STR
1. Go to www.mlb.com
2. Mouseover "Fantasy" item in the red part of the navigation bar in the site

Expected: Images in the center should be displayed correctly even as the mouseover expands the "Fantasy" menu over it.

Actual: The images disappear and the area becomes white.

Notice if you mouseover "Tickets" this does not happen. The "Tickets" menu doesn't overlap the image.

Comment 5

[Aaron Fowler]

> I have seen this happen in 2.0 as well.
> 
> STR
> 1. Go to www.mlb.com
> 2. Mouseover "Fantasy" item in the red part of the navigation bar in the site

I updated the bug to mention that this is still happening in Firefox 2.0 on Mac OS 10.4.  The www.mlb.com url provides a glaring example of this bug.

Comment 6

[Bret Van Horn]

I, too, have had this problem, on the most recent release of Firefox for Mac as of 12/14/2006. In my case, removing the div around the flash object did not help. I either had to:

- Remove the opacity filters for my drop down menus

or

- Remove the wmode=transparent attribute from my flash object

Ended up doing a browser detect to make the menus non-transparent on Mac Firefox. All works fine and as expected on Windows Firefox. 

(In reply to comment #5)
> > I have seen this happen in 2.0 as well.
> > 
> > STR
> > 1. Go to www.mlb.com
> > 2. Mouseover "Fantasy" item in the red part of the navigation bar in the site
> 
> I updated the bug to mention that this is still happening in Firefox 2.0 on Mac
> OS 10.4.  The www.mlb.com url provides a glaring example of this bug.
> 

Comment 7

[Romain OLLIVIER]

I have the same problem. Flash elements with the "adblock" tab (a div with an opacity lesser than 1) of the "Adblock plus" are not displayed. When I disable the adblock module it works correctly...

Comment 8

[Johannes la Poutre]

Same problem still exists for:
Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

> > I have seen this happen in 2.0 as well.
> > 
> > STR
> > 1. Go to www.mlb.com
> > 2. Mouseover "Fantasy" item in the red part of the navigation bar in the site
> 
> I updated the bug to mention that this is still happening in Firefox 2.0 on Mac
> OS 10.4.  The www.mlb.com url provides a glaring example of this bug.
> 

Comment 9

[Liam Morland]

The looks like the same bug as 316905 and 369252.

Comment 10

[tdv]

Still a problem in 2.0.0.12 on Mac OS X 10.4.11.  One interesting example is www.engenderhealth.org, where jQuery is used to have drop-down menus fade in quickly.  They are absolutely positioned above a Flash animation.  During the moment that a menu item fades in, the Flash animation disappears, but it reappears the moment that the menu's CSS opacity reaches 1.0.  This leads to a "blinking" effect for the Flash animation (but only in Firefox -- works fine in IE 6/7 or Safari).

In this case, the drop-down menus also use a translucent 24-bit PNG as a background image, and *this* alpha transparency works as intended over the Flash animation.

Comment 11

[Dave Myron]

Still in 2.0.0.14 on Mac OS X.5. Also, it seems that the only fix is to remove the opacity - removing the wmode from the Flash doesn't have an effect.

Comment 12

[Kevin Newman]

I had this problem on a site I'm working on. The problem seems to be fixed in FF3 RC1 - at least on the site I'm working on.

Comment 13

[Anders G. Jørgensen]

(In reply to comment #12)
> I had this problem on a site I'm working on. The problem seems to be fixed in
> FF3 RC1 - at least on the site I'm working on.

Can anyone confirm it has been fixed?

Comment 14

[:Gijs (he/him)]

(In reply to tdv from comment #10)
> Still a problem in 2.0.0.12 on Mac OS X 10.4.11.  One interesting example is
> www.engenderhealth.org

This is a nice testcase, but it works perfectly for me, and I do not recall seeing this for a loooooong time, so: works for me! :-)