490135 - Opacity should not change stack order of static elements

Status: RESOLVED DUPLICATE of bug 401682

(Core :: Layout, defect)

Description

[Edward Webb]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9.1b3) Gecko/20090305 Firefox/3.1b3 (.NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9.1b3) Gecko/20090305 Firefox/3.1b3 (.NET CLR 3.5.30729)

While testing the box-shadow and opacity elements in CSS3, I noticed a bug when two <div>'s are next to each other with different opacity.

The bug only happens when the second <div> has an opacity of 1. It works fine when the opacity is 0.999.

I'll attach a testcase, showing the bug on the last <div> with opacity: 1, and how it should be, with opacity: 0.999.

Reproducible: Always

Steps to Reproduce:
1. Create two div's with same background-color, adjacent to each other.
2. Apply box shadows to both with css, with the shadow to the bottom-right of the boxes.
3. Give the first div an opacity (e.g. 0.8), and keep the second div with an opacity of 1.
Actual Results:  
The first <div>'s shadow 'leaks' on top of the next <div>.

Expected Results:  
Shadow from first <div> not shown inside the second <div>, only visible below.

Comment 1

[Edward Webb]

Attachment: Box shadow bug on <div>

Comment 2

[philippe (part-time)]

This is the expected result, given that opacity (< 1) creates a stacking context.

http://www.w3.org/TR/css3-color/#transparency.

WebKit does the same here.

Comment 3

[Emil Ivanov]

This looks weird, like opacity triggers higher anonymous "z-index" on static elements. Adding position relative to the boxes fixes this.
This reminds me like IE bugs where I have to use position relative to trigger hasLayout.

If this is by the spec, then it's wrong or I'm missing something.

Making the main box with position relative and every box with absolute positioning after each other shows the logical result.

All boxes are non transparent and their shadows are not above any of the others, then adding transparency should not change the order of the elements.
Transparent boxes should appear under solid boxes because we can see behind transparency. We can't see under non transparent boxes unless we have some super goggles.

IMO this "stacking" should be valid only for elements with transparency and their child elements. Not for adjacent non transparent elements.

Comment 4

[Emil Ivanov]

Attachment: testcase 2

Testcase with static, relative and absolute positioning.

Comment 5

[Emil Ivanov]

Confirming with latest trunk: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.3a1pre) Gecko/20090830 Minefield/3.7a1pre

Comment 6

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Our behavior is correct.