Div tag that overlays a Flash movie on a page gets hidden behind the Flash movie even if the z-index of the Div tag is set to 1000.

UNCONFIRMED
Unassigned

Status

()

Core
Layout
UNCONFIRMED
12 years ago
2 months ago

People

(Reporter: butterfly, Unassigned)

Tracking

Trunk
x86
Windows XP
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

12 years ago
User-Agent:       Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.0.3705)
Build Identifier: 1.5.0.3

A Div tag that has text (table with background set to a color) that overlays a Flash movie on a page gets hidden behind the Flash movie even if the z-index of the Div tag is set to 1000.

Reproducible: Always

Steps to Reproduce:
1.Create a flash movie in a web page
2.Create a Div tag with text with visibility set to "hidden"
3.Use the DOM to set the visibility of a DIV tag to "visible" so it overlays the Flash movie
4. Notice that the Flash movie is always on top of the DIV which is not what should happen since the Z-index is set to 1000.


Actual Results:  
The Div tag that is set to visible is behind the Flash movie.

Expected Results:  
The Div tag that is set to visible should be overlaying the Flash movie.

Updated

12 years ago
Component: General → Layout
Product: Firefox → Core
QA Contact: general → layout
Version: unspecified → 1.8 Branch

Comment 1

12 years ago
This happens even without "visibility" involved, though I believe it's still the same bug.
I achieve the overlapping by using position:absolute on HTMLDivElement - with the same result - the flash-movie is always on top.
Coincidentally I have yet another flash-movie in the page, this one is absolutely positioned too and it displays properly (under the div-element or according to what z-index is set to).

Comment 2

12 years ago
did you use wmode="opaque" for the flash movie, so that it is layered in with the HTML rather than a separate movie above?

Comment 3

12 years ago
(In reply to comment #2)
> did you use wmode="opaque" for the flash movie, so that it is layered in with
> the HTML rather than a separate movie above?
> 

Thanks Graham, with wmode=opaque it renders properly.
Thanks again!

Comment 4

11 years ago
I'm seeing something like this for a non-animated flash wigit regardless of the settings of wmode (opaque, transparent and default). 

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a9pre) Gecko/2007110600 Minefield/3.0a9pre 

(I built from source as ff-opt-static on  Nov  5 23:47 just for kicks...)

This can be seen in action on http://go.kestrel.nu if you click on "A Pro Way" on the left sidebar and then select either the april or july article. when the page is scrolled, the flash go board (z-index:0) slides overtop of the footer div (z-index:95). 

Seems to be ignoring z-index entirely. This is bad beacause it all worked just fine in firefox 2.

Looks like there is a regression, but maybe this belongs in a new bug since it's on a more recent codebase?

Comment 5

11 years ago
Hello Everyone. I wish I could say this was fixed, but it's NOT. It's not just FLASH but also QuickTime plugin instances as well. The Javascript DIV's gets stomped on by the PLUGIN when wmode=transparent. This is what I'm seeing using FIREFOX. It ALMOST works in FIREFOX on SAFARI, but fades in and out of existence. My main interest is making it work on FIREFOX on Windows XP SP2. SAFARI on MAC OS X ALWAYS works correctly, and I've seen where it also works on Internet Explorer as reported by others only. Getting this to work is CRITICAL to my company's work, and we're moving away from FIREFOX to get SAFARI on WINDOWS working as it does on MAC OS X until MOZILLA developers take this seriously enough to fix it. Meanwhile I'll VOTE along with you guys so that you'll have my moral support to get it working for all of our situations.

Comment 6

11 years ago
Whoops. My wording is messed up in my previous comment. I meant to say that wmode=transparent ALMOST works using FIREFOX on MAC OS X that is a dual-core INTEL laptop. But, saying that it fades in and out is still accurate. FIREFOX on a Windows XP SP2 machine doesn't work at all. The QuickTime plugin stomps on my JAVASCRIPT DIV; which is similar to what you're seeing with FLASH.

Comment 7

10 years ago
The same bug also appears on iframes.

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9) Gecko/2008051206 Firefox/3.0

Comment 8

10 years ago
Confirmed.

Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9) Gecko/2008051202 Firefox/3.0 (rc1)

This bug needs to be fixed sooner rather than later. As it stands no content can be successfully layered over Flash content even though Flash provides a mechanism to allow this (setting the flash param 'wmode' to opaque or transparent).

This for instance breaks (navigation) elements with position:fixed or dhtml menues no matter what their z-index is. The flash plugin is rendered on top regardless.

As mentioned in previous comments this appears to also apply to other plugins, which means the scope of this bug is unclear. Its severity however should clearly be at least set to major!

For a discussion on how Gecko should behave (and apparently this is a regression) see:
http://www.communitymx.com/content/article.cfm?cid=E5141
For a testcase see:
http://www.communitymx.com/content/source/E5141/wmodeopaque.htm

Can someone who has permission set the bug URL to this?
Also confirmed, version, severity, Hardware, OS need to be adjusted...
The bug title IMO should be something like: Plugins/Flash don't respect z-index, always rendered on top.

Comment 9

10 years ago
Hi,
I have noticed a similar problem:

Reproducible: Always

When using wmode=transparent for a Flash movie with HTML div layers above it, everything is rendered fine. However, if you move the mouse over any CSS styled HML elment (in this case links) everything disappears behind the Flash movie.

This ONLY happens on
PPC MAC with OSX and FIREFOX 3.
Intel Macs are fine, so is WindXPSP2 with FF3.

Only on RollOver though, when the content is re-rendered/updated.

Comment 10

10 years ago
I have this problem as well and its reproducible always.

if a div is absolutely positioned then it goes behind a flash object.

position fixed solves issues on windows, but on the mac the issue always persists.

Comment 11

10 years ago
All test cases from post #8 fail on my machine
https://bugzilla.mozilla.org/show_bug.cgi?id=337298#c8

My current user agent:
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.2pre) Gecko/2008072703 Firefox/3.0.2pre (Swiftfox)

Happens with regular Firefox too, not just Swiftfox.
Probably the same as bug 258716.
Version: 1.8 Branch → Trunk
You need to log in before you can comment on or make changes to this bug.