Colors aren't blending correctly when using `mix-blend-mode`
Reported by
mlmakegraff@gmail.com,
Sep 3
|
|||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36 Steps to reproduce the problem: 1. Use Chrome or Safari on Mac. 2. Take a look at these two identical animations using different technologies: - One using SVG + mix-blend-mode CSS property: https://codepen.io/asistapl/pen/WEzVma - Other using canvas: https://codepen.io/asistapl/pen/mGWrYa What is the expected behavior? Canvas version works correctly everywhere. SVG version works correctly in every browser supporting mix-blend-mode on Windows and in Firefox on Mac. Chrome and Safari on Mac display burgundy color instead of black. Simplified example: https://codepen.io/asistapl/pen/qMmRoe?editors=1100 Square div shouldn't be visible but it blends to burgundy color instead of black. What went wrong? Colors aren't blending correctly when using `mix-blend-mode: multiply` on DOM or SVG elements. Did this work before? N/A Does this work in other browsers? N/A Chrome version: 68.0.3440.106 Channel: stable OS Version: OS X 10.13.6 Flash Version:
,
Sep 4
Thanks for filing the issue! Able to reproduce the issue on reported chrome version 68.0.3440.106 and on the latest canary 71.0.3541.0 using Mac 10.13.1. Square div is seen on Ubuntu 14.04, but it isn't in burgundy colour. Note: Issue is not seen on Windows 10. Bisect Information: -------------------- Good Build: 61.0.3143.0 Bad Build: 61.0.3144.0 You are probably looking for a change made after 482903 (known good), but no later than 482904 (first known bad). CHANGELOG URL: https://chromium.googlesource.com/chromium/src/+log/8b4643f67dc1c6b142a152aa2b76c771287e3a22..1894d423068be735560e0171922c833c4091b5d1 Suspecting: https://chromium.googlesource.com/chromium/src/+/1894d423068be735560e0171922c833c4091b5d1 Review URL: https://chromium-review.googlesource.com/551092 @Christopher Cameron: Please help in assigning it to the right owner if this is not related to your change.
,
Sep 10
,
Sep 10
I suspect the bisect is wrong, or at least misdirecting, but maybe not. ccameron@, feel free to move to Available.
,
Sep 10
,
Sep 11
non-Canvas blending is performed in display color space. Canvas blending is performed in sRGB color space. This is not-quite-the-spec, but is the only option for reasonable performance (and is the behavior of Safari and Chrome, which are the only browsers that support any color space besides sRGB).
,
Oct 8
This is not the behavior of Safari or Firefox, this is not just mix-blend-mode multiply, it affects many other settings also. I have opened issue: https://bugs.chromium.org/p/chromium/issues/detail?id=893191 I've made a simple test site: https://ciantic.github.io/html-rgb-offset/ Also note how it ruins this effect: https://codepen.io/nathantaylor/pen/XMXQrK turning the grayscale image to sepia.
,
Oct 9
,
Oct 9
Issue 893191 has been merged into this issue.
,
Oct 9
The merged bug confirms this is due to blending in the display color space instead of sRGB, as suspected in comment #6. It has been suggested that we switch to defaulting to sRGB and make "Custom Color Profile" the opt-in setting. I'm coming around to that idea.
,
Oct 10
Re #7 -- it doesn't always happen on Safari, but depending on the size of the element, it sometimes will. Safari sometimes rasters to sRGB and other times to the output display color space. Re #10, I'm a bit on the fence here. For macOS, we should support WCG profiles. For Windows and Linux, I think opt-in is the way to go (and we should not support custom transfer functions, as they are almost always lies). For Android we are still waiting for use-able WCG support. For CrOS, we appear to have good enough quality control that we can use the specified profiles. |
|||||||
►
Sign in to add a comment |
|||||||
Comment 1 by viswa.karala@chromium.org
, Sep 3