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
<rdar://problem/49387130>
Holy React tests batman. Needs to transpile modules before it can show three divs?
Created attachment 366243 [details] Testcase
I think we just don't support the non-separable blend modes on GPU layers.
// FIXME: CA does't support non-separable blend modes on compositing filters.