196303 2019-03-27 10:05:53 -0700 Non-separable blend modes in mix-blend-mode don't work on elements in compositing layers 2024-09-30 14:23:48 -0700 1 1 1 Unclassified WebKit Compositing Safari Technology Preview Mac macOS 10.14 RESOLVED FIXED InRadar P2 Normal --- 1 mattgperry simon.fraser dino eelco graouts simon.fraser thorton webkit-bug-importer zalan oldest_to_newest 1521721 0 mattgperry 2019-03-27 10:05:53 -0700 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 1522125 1 webkit-bug-importer 2019-03-28 11:16:13 -0700 <rdar://problem/49387130> 1522358 2 simon.fraser 2019-03-28 21:18:06 -0700 Holy React tests batman. Needs to transpile modules before it can show three divs? 1522359 3 366243 simon.fraser 2019-03-28 21:18:18 -0700 Created attachment 366243 Testcase 1522360 4 simon.fraser 2019-03-28 21:20:40 -0700 I think we just don't support the non-separable blend modes on GPU layers. 1522363 5 simon.fraser 2019-03-28 21:31:30 -0700 // FIXME: CA does't support non-separable blend modes on compositing filters. 2062536 6 simon.fraser 2024-09-23 16:19:22 -0700 Pull request: https://github.com/WebKit/WebKit/pull/34129 2062812 7 ews-feeder 2024-09-24 12:55:11 -0700 Committed 284170@main (4d83f317a465): <https://commits.webkit.org/284170@main> Reviewed commits have been landed. Closing PR #34129 and removing active labels. 2064339 8 ews-feeder 2024-09-30 14:23:48 -0700 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. 366243 2019-03-28 21:18:18 -0700 2019-03-28 21:18:18 -0700 Testcase mix-blend-mode-compositing.html text/html 515 simon.fraser PGh0bWwgbGFuZz0iZW4iPgo8aGVhZD4KCTxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4KICAgIDxzdHls ZT4KICAgICAgICAuYm94IHsKICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlOwogICAgICAg ICAgICB3aWR0aDogMjAwcHg7CiAgICAgICAgICAgIGhlaWdodDogMjAwcHg7CiAgICAgICAgfQog ICAgPC9zdHlsZT4KPC9oZWFkPgo8Ym9keT4KPGRpdiBpZD0icm9vdCI+CiAgICA8ZGl2IGNsYXNz PSJib3giIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiByZWQ7IHRyYW5zZm9ybTogdHJhbnNsYXRl WigwcHgpOyI+PC9kaXY+CiAgICA8ZGl2IGNsYXNzPSJib3giIHN0eWxlPSJ0b3A6IDEwMHB4OyBs ZWZ0OiAxMDBweDsgYmFja2dyb3VuZC1jb2xvcjogYmx1ZTsiPjwvZGl2PgogICAgPGRpdiBjbGFz cz0iYm94IiBzdHlsZT0idG9wOiA1MHB4OyBsZWZ0OiA1MHB4OyBiYWNrZ3JvdW5kLWNvbG9yOiBi bGFjazsgbWl4LWJsZW5kLW1vZGU6IGNvbG9yOyI+PC9kaXY+CjwvZGl2Pgo8L2JvZHk+CjwvaHRt bD4=