275251 - Negative Margin Opacity Layers

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Nick]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0

When trying to layer an element containing text over a semi-opaque element the
text becomes unselectable because the opaque element moves on top.  When the
opacity is set to 1 the semi-opaque element takes its proper place below the
element containing text, but if it is set lower than 1 then the semi-opaque
element jumps on top of the text element.

When doing the layering with relative positioning the elements stay properly
layered.  This bug only seems to occur when using negative margins.  The same
bug occurs when having the elements float next to eachother, with one of them
having a margin of "-100%".

Reproducible: Always

Steps to Reproduce:
1. Create two divisons right next to eachother
2. Use negative margins to move one on top of the other
3. Give the division that's on the bottom an opacity value lower than 1
Actual Results:  
The semi-opaque division, which was on the bottom in step 2, moved on top of the
other divison.

Expected Results:  
The opacity should not have changed the elements' layering behaviors.

I tested this bug in Mozilla 1.8a4 and I got the same results.  I didn't report
it on the Mozilla forum though.

Comment 1

[Martijn Wargers (dead)]

Attachment: Testcase

Nice testcase. Thanks. But it is better to add the testcase to the bug (with
the link: "Create New Attachment".

Comment 2

[Daniel C]

Status -> NEW

Indeed, with anything less than opacity: 1; the lower div jumps through to the top.

Comment 3

[Martijn Wargers (dead)]

This appears to be invalid, see bug 191830, comment 34 and further.

Comment 4

[Patrick Dark]

Is the “bug” shown at http://www.jsgp.us/demos/CF114285.html the same as this one? On that page, the opacity causes the text to not overlap the float as expected in Firefox 2/3a4; you’ll need to hover over the image to see it. Opera renders the semi‐transparent image beneath the text and I’m unsure which is rendering it correctly. Was going to report this as a Firefox bug until I saw this one.

Comment 5

[Martijn Wargers (dead)]

Yeah, Firefox treats elements with opacity as a new stacking context.
Apparently, Opera isn't doing that (yet?).