Last Comment Bug 573421 - issue about css3 opacity property and z-index specification
: issue about css3 opacity property and z-index specification
Status: RESOLVED INVALID
:
Product: Core
Classification: Components
Component: CSS Parsing and Computation (show other bugs)
: unspecified
: All All
: -- normal (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
Mentors:
http://usabili.ru/labs/css_opacity_bu...
: 603299 (view as bug list)
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2010-06-20 20:05 PDT by Alex Shilov
Modified: 2010-10-11 04:49 PDT (History)
3 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
current contents of http://usabili.ru/labs/css_opacity_bug.html (2.09 KB, text/html)
2010-06-20 20:14 PDT, David Baron :dbaron: ⌚️UTC+8 (review requests must explain patch)
no flags Details

Description Alex Shilov 2010-06-20 20:05:38 PDT
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+8 (review requests must explain patch) 2010-06-20 20:14:13 PDT
Created attachment 452623 [details]
current contents of http://usabili.ru/labs/css_opacity_bug.html
Comment 2 Boris Zbarsky [:bz] 2010-06-20 20:22:13 PDT
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+8 (review requests must explain patch) 2010-06-20 20:22:49 PDT
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 2010-06-21 06:39:02 PDT
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. =)
Comment 5 Robert Longson 2010-10-11 04:49:49 PDT
*** Bug 603299 has been marked as a duplicate of this bug. ***

Note You need to log in before you can comment on or make changes to this bug.