384019 - Stacked IFRAME element do not honour z-index settings - items are visible below

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Giles Hinton]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4

Rather than go down the popup window route to show dialogues or "wizards", I have used an absolutely positioned IFRAME element (with no source, just a fixed height and width, and background colour) and placed it over the existing page.  This gets around the "SELECT boxes show through absolutely positioned DIV tags" problem suffered by most browsers.

The IFRAME element has a higher z-index value than its containing page, yet on ocassion, the page renders with pieces missing, or with text from the containing page showing through the IFRAME; these problems seem to be worse on the MAC implementation.  Internet Explorer (v5.5+) has no issues in rendering the page.

My pages are all well formed HTML, and from what I've seen it looks like this might be a fairly big issue in the rendering engine in Firefox - it's like it did not expect IFRAME elements to be used in this fashion.

Reproducible: Always

Steps to Reproduce:
1. Create a relatively complex page, with several IFRAME elements
2. Use JavaScript to position iframe elements over one another, ensuring you have content behind each iframe that contains select boxes, radio buttons and div tags.
Actual Results:  
Radio buttons, select boxes or random pieces of text show through for no obvious reason, whatever their z-index settings.

Expected Results:  
The iframes should stack as expected, with only the top-most iframe's content being visible until it is hidden.

Comment 1

[Adam Guthrie]

Can you attach a simple HTML testcase that shows the bug?

Comment 2

[Giles Hinton]

Unfortunately the page I'm working on is not "simple" persay - it's fairly heavyweight - the iframe being shown over existing content contains 62Kb worth of data on the initial render and that content can be added to using AJAX calls.

The IFRAME technique I'm using is generally referred to as a "shim", and I had problems with getting it to work in Firefox in previous versions of our applications; in the end I had to work around those problems using a combination of positioning and line breaks to stop content from under the IFRAME showing through.  Getting it to work on the MAC was a nightmare as the MAC seemed to suffer from the problem even more than the PC version.

Trying to show or hide DIV elements in the IFRAME element also seems to frustrate the browser - sometimes they hide and sometimes they don't!  What's very annoying is that there is no pattern to this latter behaviour - I perform the same steps to hide and show a DIV using style.display and sometimes it works as expected, and sometimes I get gaping holes where 95% of the content has been hidden, but for some reason the last 5% is ignored.

I can send screen shots if that is more helpful - the source is fairly hefty as I mentioned.

Comment 3

[Giles Hinton]

I have since found that this is caused by elements which use position:relative - in Firefox these elements do not inherit the z-index of their parent elements, whereas in Internet Explorer they do.
Setting an explicit z-index attribute on elements with position:relative resolves the issue.  I will flag this as a bug elsewhere.