[Webkit-unassigned] [Bug 196303] New: mix-blend-mode disabled on elements that overlap a GPU layer

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=196303

            Bug ID: 196303
           Summary: mix-blend-mode disabled on elements that overlap a GPU
                    layer
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Macintosh
                OS: macOS 10.14
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Compositing
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: mattgperry at gmail.com

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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20190327/7520f286/attachment.html>