634232 - If a transformed transparent div is rendered over a div with opacity set it is not transparent

Status: VERIFIED FIXED

(Core :: Web Painting, defect)

Description

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

User-Agent:       Mozilla/5.0 (X11; Linux i686; rv:2.0b12pre) Gecko/20110215 Firefox/4.0b12pre
Build Identifier: 4.0b12pre (2011-02-15) - rev. 2c646d10b9c7

If a transformed transparent div is rendered over a div with opacity set to say 0.5 it is rendered in the same color as the underlying div but with an opacity of 1.

To reproduce this:
1. Open the attached file
2. Observe that the foreground div is black ... it should be transparent


Reproducible: Always

Comment 1

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: Firebug Issue 4079

Comment 2

[Boris Zbarsky [:bzbarsky]]

This worksforme on Mac, but I do see the problem on Linux.

Comment 3

[Boris Zbarsky [:bzbarsky]]

Regression range: http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=199cb6282554&tochange=1ed3464aaa92

Several related things in there.

Comment 4

[Patrick Walton (:pcwalton)]

(In reply to comment #2)
> This worksforme on Mac, but I do see the problem on Linux.

I can reproduce this some of the time on Mac with accelerated layers on. Seems to be about a 50-50 chance.

Comment 5

[Patrick Walton (:pcwalton)]

Fails for me on changeset afb62e95311a, which means it's one of these:

221893d96b93	Robert O'Callahan — Bug 625672. Part 2: Build temporary layer manager to render inactive layers after we've recomputed visibility. r=tnikkel,a=blocker
	216a0dd9c4c3	Robert O'Callahan — Bug 625672. Part 1.5: Make layer managers silently do nothing when ending a transaction with no root layer. r=bas,a=blocker
	4ef484b5eca6	Robert O'Callahan — Bug 625672. Part 1: Fix scrolling tests to actually test stuff correctly. r=dbaron
	1431568b3e1b	Robert O'Callahan — Bug 618722. Test.
	84cebd5b0f93	Robert O'Callahan — Bug 618722. background-attachment:fixed display items rendered via temporary layer managers can't have their scrolling taken care of via the layer system, so make sure we invalidate them when we scroll in their document. r=tnikkel,a=blocker

Comment 6

[Katelyn Gadd (:kael)]

I can reproduce this on Windows with a debug build.

Interesting note from fiddling with it a bit:
Every time the page is repainted, this warning appears in stdout:

WARNING: Unable to test style tree integrity -- no content node: file c:/mozilla/ff-debug/layout/base/../../../layout/base/nsCSSFrameConstructor.cpp, line 8061

Based on that, I experimented with adding content to the two divs in the document. If you add text content to the first div, like this:

<div class="posabssemitransparentblack">a</div>

The rendering bug goes away. However, the warning's still there, so this may not mean anything. Figured I'd mention it anyway.

Comment 7

[Timothy Nikkel (:tnikkel)]

That warning fires in all sorts of situations when nothing is wrong at all.

Comment 8

[Katelyn Gadd (:kael)]

Here's what the layer tree for this document looks like when rendering incorrectly for me on windows:

Clip 0B6BB830(Block(div)(3)) (25,2425,12450,11275)(25,2427,12450,11271) opaque
    CanvasBackground 0F309B40(Canvas(html)(-1)) (25,2425,12450,11275)(25,2425,12450,11275) opaque uniform layer=0BD5B170
    Opacity 0B6BB688(Block(div)(1)) (25,2425,12450,11275)(25,2425,12450,11275) layer=0BD5B170
        Background 0B6BB688(Block(div)(1)) (25,2425,12450,11275)(1225,3625,3200,3200) opaque uniform
    nsDisplayTransform 0B6BB830(Block(div)(3)) (1224,3625,3201,3200)(1224,3625,3201,3200) layer=0BB19F50
        Border 0B6BB830(Block(div)(3)) (1225,3625,3200,3200)(1225,3625,3200,3200)

And here's what it looks like if I add text to the background div (which causes it to render correctly):
Clip 0B6D0958(Block(div)(3)) (25,2425,12450,11275)(25,2427,12450,11271) opaque
    CanvasBackground 0F038998(Canvas(html)(-1)) (25,2425,12450,11275)(25,2425,12450,11275) opaque uniform layer=0BFA7410
    Opacity 0B6D06D8(Block(div)(1)) (25,2425,12450,11275)(25,2425,12450,11275) layer=0BFA7410
        Background 0B6D06D8(Block(div)(1)) (25,2425,12450,11275)(25,2425,12450,11275) opaque uniform
        Text 0B6D07E0(Text(0)) (25,2450,450,1100)(25,2450,450,1100)
    nsDisplayTransform 0B6D0958(Block(div)(3)) (1224,3625,3201,3200)(1224,3625,3201,3200) layer=0BFA7780
        Border 0B6D0958(Block(div)(3)) (1225,3625,3200,3200)(1225,3625,3200,3200)

I don't see any differences between the correct/incorrect layers other than the addition of the text layer, so it seems like this is a failed optimization that occurs because the Border layer (for the second div) is directly after the Background layer (for the first div).

I'd be interested to see if the layer tree looks different on patrick's mac when it happens to render correctly for him, since for me the bug is reliable.

Comment 9

[Katelyn Gadd (:kael)]

tn corrected me: Those are the display lists. These are the layer trees! (Glad I saved them)

No text node (incorrect rendering)

D3D10LayerManager (0xb68c920)
  D3D10ContainerLayer (0xba87c90) [visible=< (x=0, y=0, w=500, h=549); >] [metrics={ viewport=(x=0, y=0, w=500, h=549) viewportScroll=(x=0, y=0) displayport=(x=0, y=0, w=0, h=0) scrollId=0 }]
    D3D10ThebesLayer (0xbca1870) [visible=< (x=0, y=0, w=500, h=548); >] [valid=< (x=0, y=0, w=500, h=548); >]
    D3D10ContainerLayer (0xba87e18) [clip=(x=0, y=0, w=500, h=549)] [visible=< (x=0, y=97, w=1, h=451); >]
      D3D10ThebesLayer (0xbca1a28) [clip=(x=0, y=0, w=0, h=0)]
      D3D10ColorLayer (0xb9ab380) [clip=(x=0, y=97, w=1, h=451)] [visible=< (x=0, y=97, w=1, h=451); >] [color=rgba(26, 26, 26, 0.4)]
    D3D10ContainerLayer (0xbf7a520) [clip=(x=1, y=97, w=498, h=451)] [visible=< (x=1, y=97, w=498, h=451); >] [opaqueContent]
      D3D10ThebesLayer (0xbb19a28) [transform=[ 1 0; 0 1; 1 97; ]] [visible=< (x=0, y=0, w=498, h=451); >] [opaqueContent] [valid=< (x=0, y=0, w=498, h=451); >]
      D3D10ThebesLayer (0xbb19be0) [visible=< (x=48, y=145, w=129, h=128); >] [valid=< (x=48, y=145, w=129, h=128); >]
    D3D10ContainerLayer (0xba87fa0) [clip=(x=0, y=0, w=500, h=549)] [visible=< (x=499, y=97, w=1, h=451); >]
      D3D10ThebesLayer (0xbca1d98) [clip=(x=0, y=0, w=0, h=0)]
      D3D10ColorLayer (0xb9ab650) [clip=(x=499, y=97, w=1, h=451)] [visible=< (x=499, y=97, w=1, h=451); >] [color=rgba(26, 26, 26, 0.4)]
    D3D10ContainerLayer (0xba88128) [clip=(x=0, y=0, w=500, h=549)] [visible=< (x=0, y=548, w=500, h=1); >]
      D3D10ThebesLayer (0xbca1f50) [visible=< (x=0, y=548, w=500, h=1); >] [valid=< (x=0, y=548, w=500, h=1); >]

w/text node (correct rendering):

D3D10LayerManager (0xb68c920)
  D3D10ContainerLayer (0xba87c90) [visible=< (x=0, y=0, w=500, h=549); >] [metrics={ viewport=(x=0, y=0, w=500, h=549) viewportScroll=(x=0, y=0) displayport=(x=0, y=0, w=0, h=0) scrollId=0 }]
    D3D10ThebesLayer (0xbca1870) [visible=< (x=0, y=0, w=500, h=548); >] [valid=< (x=0, y=0, w=500, h=548); >]
    D3D10ContainerLayer (0xba87e18) [clip=(x=0, y=0, w=500, h=549)] [visible=< (x=0, y=97, w=1, h=451); >]
      D3D10ThebesLayer (0xbca1a28) [clip=(x=0, y=0, w=0, h=0)]
      D3D10ColorLayer (0xb9ab380) [clip=(x=0, y=97, w=1, h=451)] [visible=< (x=0, y=97, w=1, h=451); >] [color=rgba(26, 26, 26, 0.4)]
    D3D10ContainerLayer (0xbf7a830) [clip=(x=1, y=97, w=498, h=451)] [visible=< (x=1, y=97, w=498, h=451); >] [opaqueContent]
      D3D10ThebesLayer (0xbfa7410) [transform=[ 1 0; 0 1; 1 97; ]] [visible=< (x=0, y=0, w=498, h=451); >] [opaqueContent] [valid=< (x=0, y=0, w=498, h=451); >]
      D3D10ThebesLayer (0xbfa7780) [visible=< (x=48, y=145, w=129, h=128); >] [valid=< (x=48, y=145, w=129, h=128); >]
    D3D10ContainerLayer (0xba87fa0) [clip=(x=0, y=0, w=500, h=549)] [visible=< (x=499, y=97, w=1, h=451); >]
      D3D10ThebesLayer (0xbca1d98) [clip=(x=0, y=0, w=0, h=0)]
      D3D10ColorLayer (0xb9ab650) [clip=(x=499, y=97, w=1, h=451)] [visible=< (x=499, y=97, w=1, h=451); >] [color=rgba(26, 26, 26, 0.4)]
    D3D10ContainerLayer (0xba88128) [clip=(x=0, y=0, w=500, h=549)] [visible=< (x=0, y=548, w=500, h=1); >]
      D3D10ThebesLayer (0xbca1f50) [visible=< (x=0, y=548, w=500, h=1); >] [valid=< (x=0, y=548, w=500, h=1); >]


Lots of layers in there; I'm guessing most of them are for the aero theme and the rest of the UI.

Comment 10

[Robert O'Callahan (:roc) (email my personal email if necessary)]

I see it 100% of the time. I'm working on this when not distracted by reviews etc :-)

Comment 11

[Timothy Nikkel (:tnikkel)]

I remember there being a check for layer user data being the global thebes layer data sentinel in one of the two fingered patches that I reviewed. Perhaps that code needs to deal with color layers to?

Comment 12

[Robert O'Callahan (:roc) (email my personal email if necessary)]

I get a lot of messages on the console:
_cairo_win32_surface_composite(BitBlt): The parameter is incorrect.

Comment 13

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Sorry, wrong bug.

Comment 14

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Attachment: another testcase

This is weird!

Comment 15

[Robert O'Callahan (:roc) (email my personal email if necessary)]

It looks like the display item for the background gets painted twice, once in the fallback layer manager for the div-with-opacity, and then *again* in the fixed-pos DIV.

Comment 16

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Attachment: fix

OK, this turned out to be quite simple. We need to call DidEndTransaction on our temporary layer managers to ensure that mThebesLayerItems entries for the ThebesLayers of the temporary layer manager are cleaned out. Otherwise, if we're unlucky enough to create another ThebesLayer at the same address in the next temporary layer manager, we'll find in mThebesLayerItems the items for the old temporary ThebesLayer.

Comment 17

[Mike Shaver (:shaver -- probably not reading bugmail closely)]

http://hg.mozilla.org/mozilla-central/rev/91f704d9bd95

Comment 18

[José Jeria]

Verified fixed using build: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b12pre) Gecko/20110222 Firefox/4.0b12pre