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

RESOLVED WORKSFORME

Status

()

Firefox
General
RESOLVED WORKSFORME
12 years ago
4 years ago

People

(Reporter: Aaron Fowler, Unassigned)

Tracking

({css2})

2.0 Branch
PowerPC
Mac OS X
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

12 years ago
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

12 years ago
*** Bug 309791 has been marked as a duplicate of this bug. ***
(Reporter)

Updated

12 years ago
Keywords: css2
Version: unspecified → 1.5 Branch
> 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.
(Reporter)

Comment 3

12 years ago
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

11 years ago
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.
Status: UNCONFIRMED → NEW
Ever confirmed: true
(Reporter)

Comment 5

11 years ago
> 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.
OS: Mac OS X 10.2 → Mac OS X 10.4
Version: 1.5.0.x Branch → 2.0 Branch

Comment 6

11 years ago
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

11 years ago
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

10 years ago
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

10 years ago
The looks like the same bug as 316905 and 369252.

Comment 10

10 years ago
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

9 years ago
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

9 years ago
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.
(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

4 years ago
(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! :-)
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.