976533 - [CSS Blending] An element which has mix-blend-mode other than normal does not blend if it has a child which also has mix-blend-mode set

Status: RESOLVED FIXED

(Core :: Web Painting, defect)

Comment 1

[Horia Iosif Olaru]

(In reply to Horia Iosif Olaru from comment #0)
> 

Sorry for the lack of description. I accidentally pressed the return key...

If we have an element with mix-blend-mode set to something other than normal, and this element has a child that also has a mix-blend-mode set, the child element blends correctly with the parent element. The parent element is no longer blended however.

Comment 2

[Horia Iosif Olaru]

Attachment: blended-element-with-blending-child.html

Test case that reproduces the issue. The 'intermediate' class element does not blend with the 'parent' class element, and it should. When removing the mix-blend-mode property from the 'child' class, the 'intermediate' class element will blend with the parent.

Comment 3

[Horia Iosif Olaru]

Attachment: _dump_blend_with_blending_child.html

Adding a paint dump.
This issue seems to happen because of the way mix-blend-mode is implemented. When creating the display list for an element wich creates a stacking context, and also has a child wich has mix-blend-mode, the whole list for the stacking context creating element is wrapped in a BlendContainer item. This BlendContainer isolates blending, among other things.

The parent element creates a stacking context because of having mix-blend-mode set, and is represented by a MixBlendMode item. Because this element also has a child element with mix-blend-mode set, and create a stacking context, it will also be wrapped in a BlendContainer item. 

In the attached dump, one ca see that the BlendContainer wraps the parent element MixBlendMode item. Since the BlendContainer isolates blending, it will likely also isolate its own MixBlendMode element.

This seems like an unfortunate edge case of the BlendContainer based implementation, that might be solvable by making the MixBlendMode item alway wrap the BlendContainer. I need to test this though.

Comment 4

[Horia Iosif Olaru]

This issue depends on bug 952051 because, just like in bug 947121, an element with mix-blend-mode which in turn has a mix-blend-mode child, has an associated container layer that uses a surface.

Comment 5

[Horia Iosif Olaru]

Attachment: mix-blend-mode-nested.patch

Comment 6

[Horia Iosif Olaru]

Attachment: mix-blend-mode-nested-test.patch

Comment 7

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

Comment on attachment 8382735 [details] [diff] [review]
mix-blend-mode-nested.patch

Review of attachment 8382735 [details] [diff] [review]:
-----------------------------------------------------------------

::: layout/generic/nsFrame.cpp
@@ +2024,5 @@
>      }
>    }
>  
> +  /* If adding both a nsDisplayBlendContainer and a nsDisplayMixBlendMode to the
> +   * same list, the nsDisplayBlendContainer should be added first. This only 

trailing whitespace

Comment 8

[Horia Iosif Olaru]

Attachment: mix-blend-mode-nested.patch

Removed trailing whitespace.

Comment 9

[Horia Iosif Olaru]

Try run (including patches that fix the dependency bug 952051):
https://tbpl.mozilla.org/?tree=Try&rev=e245c118706e

Comment 10

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/integration/mozilla-inbound/rev/3bbd029605a2
https://hg.mozilla.org/integration/mozilla-inbound/rev/43137b4b4b2a

Comment 11

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/3bbd029605a2
https://hg.mozilla.org/mozilla-central/rev/43137b4b4b2a

Comment 12

[Catalin Varga [QA][:VarCat]]

Attachment: print

I've tested this fix using the following environment:

FF 32
Build Id:20140602072051
OS: Win 7 x64

But the bug doesn't seem to be fixed.
I've attached a printscreen. It seems that the intermediate class has no effect.

Comment 13

[Rik Cabanier]

I'm unable to reproduce the problem.
What do you see here: http://codepen.io/adobe/pen/ac11eea3fe4b0ba55aa7e667afa51a3a

Comment 14

[Catalin Varga [QA][:VarCat]]

Sorry I got back so late to your request.
There are 3 rectangles of different colors on a yellow background. I think it's working correctly now.