354158 - Opacity doesn't show absolutely/relatively positioned elements below

Status: NEW

(Core :: Layout, defect)

Description

[Mathias Brodala]

User-Agent:       Opera/9.02 (X11; Linux i686; U; de)
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; de; rv:1.8.0.7) Gecko/20060830 Firefox/1.5.0.7 (Debian-1.5.dfsg+1.5.0.7-1)

By positioning elements absolutely it should be possible to see elements below when using opacity. However, Firefox only respects the background of the document and ignores elements below.

The best way understand what I am talking about is probably by visiting the given URI with Firefox and Opera. The latter actually renders elements visible due to opacity.

Reproducible: Always

Steps to Reproduce:
1. Visit the given page.
2. Compare with Opera’s rendering.

Actual Results:  
Elements below aren’t visible through the element which has been formatted via opacity.

Expected Results:  
The elements below should be half-visible.

Comment 1

[Daniel.S]

I did some research on this.

First, the fact that the elements are absolutely positioned doesn't seem to influence the result in any way. relative positioning as well as positioning with margins did not show a different result.

The opacity value is correctly calculated through the elements (i.e. the first div's opacity is 0.8, the second one's is 0.64 [0.8^2], the third one's is 0.8^3).
The bug, if there is one, seems to be that the background of the opacity is not taken into account. The element only let's the background color of the html/body/viewport element shine through (here I'm unsore about what's going on).

That's the same behaviour Safari exposes.

But remember that there's another kind of opacity available: rgba color values.

If I set the brackground-color with rgba's alpha value to 0.8, the same effect as visible in Opera with above's testcase is seen. In Safari as well.

The only difference between opacity and rgba is - according to CSS Color Module Level 3 - that opacity creates a stacking context. But is this the explanation for the difference?

Comment 2

[Martijn Wargers (dead)]

Attachment: testcase attached to the bug

Comment 3

[Adam Guthrie]

FWIW, this occurs if the div > div CSS rule uses position: relative or position: absolute. Could this possibly be related to bug 428642?

Comment 4

[Martijn Wargers (dead)]

No, I don't think so, I believe this is a case like bug 35135.

See also http://www.w3.org/TR/css3-color/#transparency
"
<alphavalue>
    Syntactically a <number>. The uniform opacity setting to be applied across an entire object. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range. If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is <alphavalue>.
"

So I think this is invalid.