573421 - issue about css3 opacity property and z-index specification

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Alex Shilov]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; ru-RU; rv:1.9.2.3) Gecko/20100401 Firefox/3.7a3pre GTB7.1 (.NET CLR 3.5.30729)
Build Identifier: 

Hello,
i've found a strange implementation of opacity in modern browsers. (see the demo url).
The red link in this example treated as it has z-index:0 property, but its not.
All the specification is saying about is: "If an element with opacity less than 1 is positioned, the ‘z-index’ property applies as described in [CSS21], except that ‘auto’ is treated as ‘0’ since a new stacking context is always created. See section 9.9 and Appendix E of [CSS21] for more information on stacking contexts". And in the mentioned  sections i've found nothing that help me.
I'm sure that browsers implementation is not quite correct. 
(css spec: http://www.w3.org/TR/css3-color/#opacity)
If it's not a bug than i'm asking you to explain Mozilla's interpretation.

yours sincerely.

Reproducible: Always

Steps to Reproduce:
1. put the <a> tag in absolute positioned div with positive z-index value.
2. Make the parent div of that div transparent with opacity style.
3. make the other transparent div, which would cover the absolute positioned div rather than lying under. (even if negative z-index is set).
Actual Results:  
The link is not clickable. (z-index not working)

Expected Results:  
The red link should be clickable. (z-index should work)

Comment 1

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

Attachment: current contents of http://usabili.ru/labs/css_opacity_bug.html

Comment 2

[Boris Zbarsky [:bzbarsky]]

The part you quoted is the part that matters.  Non-auto computed values of opacity create a new stacking context, so the #div_with_link is at stacking level 1 in the stacking context created by #container, not in the root stacking context.  Then the stacking context for #container is at level 0 in the root, as is the one for #content, which means the latter is on top (since it comes later in the document).

This is all explained in the above-cited sections of CSS2.1, and is as clear and unambiguous as any part of CSS2.1 gets.

Comment 3

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

The key parts here are:

#content {
        z-index:-1;
        opacity: 0.7;
}
#container {
        z-index:1;
        opacity: 0.7;
}
#div_with_link{
        position:absolute; z-index:1; opacity: 0.7;
}

and:

        <div id="container">
                <div  id="div_with_link">
                      NOT clickable
                </div>
        </div>
        <div id="content">
        </div>

What happens here is as follows:

The z-index property on #content and #container should be ignored, since they're not positioned.

The z-index:1 on #div_with_link works, since it is positioned.  z-index defines the order of the stacking contexts within their containing stacking context.

When #container has opacity < 1, it establishes a stacking context.  This means that the z-index: 1 only lifts #div_with_link above other things in #container.

However, when you change the opacity on #container to 1, it no longer establishes a new stacking context, and the z-index:1 on #div_with_link raises #div_with_link above everything else in the page.

On the other hand, when you change the opacity on #content to 1, it no longer establishes a new stacking context, but #container still does establish a new stacking context.  Things that establish a new stacking context (like 'z-index:0') are above things that don't.  So, again, in this case, the link becomes clickable.

Thus, our behavior is correct.

->INVALID

Comment 4

[Alex Shilov]

Very thanks Boris and David! It's what i want to hear. 
P.S. David, I was previously mailed you this question the week before (at 14 june), the mail was probably in you spambox. =)