Bug 196303 – Non-separable blend modes in mix-blend-mode don't work on elements in compositing layers

• Component: Compositing
• Status: RESOLVED FIXED

[Matt Perry]

If an element has both `mix-blend-mode` rule and has either:
1. Been promoted to a GPU layer,
2. intersects an element that has been promoted to a GPU layer
3. intersects an element that itself intersects an element that has been promoted to a GPU layer (possibly so on)

The mix-blend-mode fails to take effect.

Examples
=================================

In the following examples the red box has been forced into GPU acceleration with `translateZ(0)` - `will-change: transform; transform: anything` also has the same effect.

The blue and black boxes are not on a GPU layer.

The black box has `mix-blend-mode: color` applied.

Note: If any example fails to reproduce as per "Result", try opening the link in a separate, new tab (seriously). Sometimes these work as expected, even after refresh, and then don't when in a new tab.

Example 1
---------

Blended element overlaps *only* non-accelerated element

Visit https://0pl5r1jx3l.codesandbox.io/ 
Expected: Blend mode takes effect
Result: Blend mode indeed takes effect
With source https://codesandbox.io/s/0pl5r1jx3l

Example 2
---------

Blended element overlaps both accelerated and non-accelerated elements

Visit https://2xm9ormpkn.codesandbox.io/
Expected: Blend mode takes effect
Result: Blend mode doesn't take effect
With source https://codesandbox.io/s/2xm9ormpkn

Example 3
---------

Blended element overlaps *only* non-accelerated element, but non-accelerated element overlaps accelerated element

Visit https://0p56069jp.codesandbox.io/
Expected: Blend mode takes effect
Result: Blend mode doesn't take effect
With source https://codesandbox.io/s/0p56069jp

[Radar WebKit Bug Importer]

<rdar://problem/49387130>

[Simon Fraser (smfr)]

Holy React tests batman. Needs to transpile modules before it can show three divs?

[Simon Fraser (smfr)]

Created attachment 366243 [details]
Testcase

[Simon Fraser (smfr)]

I think we just don't support the non-separable blend modes on GPU layers.

[Simon Fraser (smfr)]

        // FIXME: CA does't support non-separable blend modes on compositing filters.

[Simon Fraser (smfr)]

Pull request: https://github.com/WebKit/WebKit/pull/34129

[EWS]

Committed 284170@main (4d83f317a465): <https://commits.webkit.org/284170@main>

Reviewed commits have been landed. Closing PR #34129 and removing active labels.

[EWS]

Committed 283286.157@safari-7620-branch (384f9e3d5bd2): <https://commits.webkit.org/283286.157@safari-7620-branch>

Reviewed commits have been landed. Closing PR #1913 and removing active labels.