Closed Bug 344361 Opened 18 years ago Closed 12 years ago

Incorrect Layering of overlapping DIVs if one uses opacity

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Version:
1.8 Branch
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 401682

People

(Reporter: junk, Unassigned)

Details

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

When rendering two divs that overlap, if the "bottom" (ie, lowest implicit z-index) DIV uses opacity, it will appear over top of the "top" DIV.

For example, this:

	<body>
		<div style="background-color: blue;width:100%;height:37px; opacity: 0.8;">
		</div>
		<div style="background-color: red;width: 100px;height:100px;margin-top:-37px;">
		</div>
	</body>

shows the "blue" DIV _over top of_ the "red" DIV, due to the opacity on the first (blue) DIV.

WORKS IF:
1) ...you remove the "opacity" from the "blue" DIV -- "red" will display "on top".
2) ...you add an "opacity: 0.99;" to the "red" DIV.

That is, it works if neither or both use opacity.  It also appears to work if only the "red" (ie, second) item has opacity (but not the first "blue" item).

Reproducible: Always

Steps to Reproduce:
1. Create a DIV with width & height and opacity of non-1/non-0
2. Create a second DIV with width & height and no opacity, use negative margin-top to position it "over" the first DIV.
3. The DIV from #1 will appear *OVER* the DIV from #2 (incorrectly).
4. Turn off opacity on #1.
5. It will no longer render "OVER" #2. (correct behaviour)

Actual Results:  
(see above)

Expected Results:  
(see above)

Reproduced on:
1) Firefox 1.5 on Windows XP
2) Firefox 1.5 on Linux / XOrg 7.0

Does not occur in Internet Explorer.

CSS Z-Index manipulation appears to have no effect on this.

This problem occurs regardless of whether you use "style" or "class".

"opacity: 1.0;" on the second DIV does NOT solve problem -- it works the same way as no opacity at all.

WORKAROUND: Use "opacity: 0.99;" on the second DIV (which appears pretty much the same as no opacity).
Component: General → Layout
Product: Firefox → Core
QA Contact: general → layout
Summary: Rendering: Incorrect Layering of overlapping DIVs if one uses opacity → Incorrect Layering of overlapping DIVs if one uses opacity
Version: unspecified → 1.8 Branch
opacity < 1.0 forms a stacking context (CSS2.1:9.9.1). The blue box renders over the red one, as it should.
I confirm this bug. Thanks for the circumvention.
I have a bug in the same idea:

With your exemple with a little modification:

    <body>
        <div id="test1" 
	     style="background-color: blue;width:100%;height:37px; opacity:0.8;"
	     onmouseover="getElementById('test2').style.display = 'block';"
	     onmouseout="getElementById('test2').style.display = 'none';">
        </div>
        <div id="test2" 
	     style="position:absolute; background-color: red;width:100px;height:150px;margin-top:-37px; display:none; opacity:0.99;">
        </div>
	<div id="test3" 
	     style="background-color: yellow;width:100%;height:37px; opacity:0.8;"
	     onmouseover="getElementById('test2').style.display = 'block';"
	     onmouseout="getElementById('test2').style.display = 'none';">
        </div>
	<div id="test4" 
	     style="background-color: green;width:100%;height:37px;"
	     onmouseover="getElementById('test2').style.display = 'block';"
	     onmouseout="getElementById('test2').style.display = 'none';">
        </div>
    </body>

You can see that the blue layer is under because it comes before the red one. The yellow one in on the red layer because it comes after.
The problem is that the red one should be on top of all the other because its position is absolute (I think).
If I create a last layer (the green one) without opacity attribut, you can see that the red one is on top of it (like it should be?).

I have no circumvention for the moment. opacity:0.99 doesn't work as you can see.
You can use z-index in your css (or in the style attribut).
It specifies the stack position of your div -> "z-index:10;" in the style of your div id="test2" layer and everything is working fine.
But it seems to me that it's hidding a bug.

Sorry for my english.
This is a duplicate of bug 401682.
Marking as dupe.
Status: UNCONFIRMED → RESOLVED
Closed: 12 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.