150940 2015-11-05 13:06:04 -0800 Gradient color interpolation incorrect for colors with alpha (need to interpolate premultiplied colors) 2023-03-23 08:38:48 -0700 1 1 1 Unclassified WebKit CSS Safari 9 All All RESOLVED FIXED https://bugs.webkit.org/show_bug.cgi?id=212442 InRadar P2 Normal --- 234492 234653 0 tmjenox sam 7raivis alexwriter2003 bramus calum.p.m.smith darin dino fujii gilmoreorless jonlee philip rik sam simon.fraser tym46383 webkit-bug-importer zyuzin.vitaly oldest_to_newest 1139717 0 tmjenox 2015-11-05 13:06:04 -0800 Currently the following gradients produce different results despite they should render the same: - opaque black to transparent black - opaque black to transparent white - opaque black to transparent anything All transparent anythings are in fact the same color, a clear color, no matter what the underlying RGB components say. It seems all four components are currently linearly interpolated, resulting in a very odd gradient -- the second one has a semitransparent gray in the middle. For semitransparent endpoint colors we have the same issue: their RBG components affect the interpolated colors too much, in an unnatural way. No matter in which color space colors are interpolated, their components should be weighted according to their alpha component. Firefox seems to use the following weighted approach, producing a much more visually appealing gradient: float r3 = (r1 * a1 * (1.0 - fraction) + r2 * a2 * fraction) / ((1.0 - fraction) * a1 + fraction * a2); float g3 = (g1 * a1 * (1.0 - fraction) + g2 * a2 * fraction) / ((1.0 - fraction) * a1 + fraction * a2); float b3 = (b1 * a1 * (1.0 - fraction) + b2 * a2 * fraction) / ((1.0 - fraction) * a1 + fraction * a2); float a3 = a1 * (1.0 - fraction) + a2 * fraction; 1139878 1 simon.fraser 2015-11-05 21:23:22 -0800 This is because we don't interpolate gradients in non-premultiplied colors, because CG can't do this yet. 1139930 2 tmjenox 2015-11-06 03:17:46 -0800 What do you mean by 'CG can't do this yet'? It is obviously possible... (In reply to comment #1) > This is because we don't interpolate gradients in non-premultiplied colors, > because CG can't do this yet. 1139963 3 darin 2015-11-06 08:22:12 -0800 The OS X and iOS graphics framework, Core Graphics, that WebKit uses to draw on those operating systems has a gradient feature that does not have a mode where it properly handles this. If we wanted to fix this problem in WebKit without waiting for the Core Graphics we would have to write a new gradient implementation that bypasses the Core Graphics Framework. Our plan is to instead ask Apple to add this feature to the Core Graphics framework. 1139969 4 tmjenox 2015-11-06 08:37:58 -0800 (In reply to comment #3) > The OS X and iOS graphics framework, Core Graphics, that WebKit uses to draw > on those operating systems has a gradient feature that does not have a mode > where it properly handles this. If we wanted to fix this problem in WebKit > without waiting for the Core Graphics we would have to write a new gradient > implementation that bypasses the Core Graphics Framework. Our plan is to > instead ask Apple to add this feature to the Core Graphics framework. Ah, I see. So is this a known/confirmed issue? One may argue for both approaches of drawing such a gradient. How does the collaboration with Apple work in such scenarios? Who even decides who's right and who's wrong? Is there a specification on how these gradients should be drawn? 1139975 5 darin 2015-11-06 08:49:10 -0800 (In reply to comment #4) > So is this a known/confirmed issue? Yes. Simon personally contacted the team at Apple responsible for Core Graphics, a while back, to let them know about this issue. 1139976 6 simon.fraser 2015-11-06 08:52:44 -0800 (In reply to comment #4) > How does the collaboration with Apple work in such scenarios? Who even > decides who's right and who's wrong? Is there a specification on how these > gradients should be drawn? This is specified by CSS: <https://drafts.csswg.org/css-images/#gradients> "with the interpolation taking place in premultiplied RGBA space" but that text is expected to change once Mac and iOS can support interpolation in non-premultiplied. 1139986 7 tmjenox 2015-11-06 09:49:27 -0800 > "with the interpolation taking place in premultiplied RGBA space" > but that text is expected to change once Mac and iOS can support > interpolation in non-premultiplied. Mh, I'm a little confused now as I'm not quite familiar with this terminology. Is interpolation in premultiplied RGBA what we are seeing now or what would be the correct thing to do? Why would that text change once Core Graphics decides to ship a fix for this bug? 1140001 8 simon.fraser 2015-11-06 10:38:33 -0800 (In reply to comment #7) > > "with the interpolation taking place in premultiplied RGBA space" > > > but that text is expected to change once Mac and iOS can support > > interpolation in non-premultiplied. > > Mh, I'm a little confused now as I'm not quite familiar with this > terminology. Is interpolation in premultiplied RGBA what we are seeing now > or what would be the correct thing to do? That's what you're seeing now. Transparent red in premultiplied color just becomes transparent, so any time you interpolate from it you end up with grayish intermediate values. > Why would that text change once Core Graphics decides to ship a fix for this bug? Because all browsers would then be able to interpolate in non-premultiplied color, and the CSS working group would change the text (at least for the next level of the spec). 1140004 9 tmjenox 2015-11-06 10:58:58 -0800 > > Mh, I'm a little confused now as I'm not quite familiar with this > > terminology. Is interpolation in premultiplied RGBA what we are seeing now > > or what would be the correct thing to do? > > That's what you're seeing now. Transparent red in premultiplied color just > becomes transparent, so any time you interpolate from it you end up with > grayish intermediate values. Sorry if this is really obvious and I am missing something, but that makes only little sense to me. I am currently seeing this behavior in Safari: [opaque black (0,0,0,1)] => [semitransparent dark red (128,0,0,0.5)] => [transparent red (255,0,0,0)] (all components interpolated linearly) However, I think it should look like this: (and it does in Firefox) [opaque black (0,0,0,1)] => [semitransparent black (0,0,0,0.5)] => [transparent black (0,0,0,0)] (color components weighted with alpha) Your description ("so any time you interpolate from it you end up with grayish intermediate values") sounds like the latter is what you call interpolation in premultiplied RGBA, however you are also stating that what I am currently seeing is interpolation in premultiplied RGBA... Could you please clear this up? Which of the two examples is interpolated in premultiplied RGBA? And how is the other method called? 1179922 10 simon.fraser 2016-04-01 13:13:13 -0700 *** Bug 156105 has been marked as a duplicate of this bug. *** 1179927 11 webkit-bug-importer 2016-04-01 13:59:08 -0700 <rdar://problem/25499232> 1265846 12 7raivis 2017-01-11 11:30:54 -0800 Any progress with this? 1640564 13 ap 2020-04-11 10:38:52 -0700 *** Bug 210365 has been marked as a duplicate of this bug. *** 1640565 14 396173 ap 2020-04-11 10:40:22 -0700 Created attachment 396173 example 1642179 15 philip 2020-04-16 01:48:25 -0700 This issue was mentioned to me while interviewing web developers about browser compat issues. I found this test in web-platform-tests which I think covers the behavior and is failing only in Safari: https://wpt.fyi/results/css/css-images/gradients-with-transparent.html?run_id=488890002&run_id=483120004&run_id=505970001 Is this still blocked on Core Graphics not supporting it? 1642181 16 philip 2020-04-16 01:58:57 -0700 I also found bug 200208, which is about the specific failure I found. 1642290 17 darin 2020-04-16 09:46:14 -0700 (In reply to Philip Jägenstedt from comment #15) > Is this still blocked on Core Graphics not supporting it? Yes. 1826099 18 fujii 2021-12-21 13:43:40 -0800 *** This bug has been marked as a duplicate of bug 234492 *** 1826174 19 sam 2021-12-21 17:43:57 -0800 Keeping this open for a moment, since we still have not enabled it yet. We need to decide what perf cost is acceptable for older platforms, and if we should add any additional optimizations like all opaque checking or the extension of that Dan suggested in https://bugs.webkit.org/show_bug.cgi?id=234492#c19. 1826664 20 447917 sam 2021-12-23 16:37:11 -0800 Created attachment 447917 Enable premultiplied interpolation for CSS gradients by default 1826684 21 ews-feeder 2021-12-23 20:24:49 -0800 Committed r287419 (245554@main): <https://commits.webkit.org/245554@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 447917. 396173 2020-04-11 10:40:22 -0700 2020-04-11 10:40:22 -0700 example 210365.html text/html 249 ap PHN0eWxlPgpwIHsKICBiYWNrZ3JvdW5kOgogICAgIGxpbmVhci1ncmFkaWVudCgKICAgICAgIHRv IHJpZ2h0LAogICAgICAgI2ZmOTgwMCwKICAgICAgIHRyYW5zcGFyZW50CiAgICAgKTsKfQo8L3N0 eWxlPgo8cD5Mb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzY2lu ZyBlbGl0LCBzZWQgZG8gZWl1c21vZCB0ZW1wb3IgaW5jaWRpZHVudCB1dCBsYWJvcmUgZXQgZG9s b3JlIG1hZ25hIGFsaXF1YS48L3A+ 447917 2021-12-23 16:37:11 -0800 2021-12-23 20:24:51 -0800 Enable premultiplied interpolation for CSS gradients by default bug-150940-20211223163710.patch text/plain 1591 sam SW5kZXg6IFNvdXJjZS9XVEYvQ2hhbmdlTG9nCj09PT09PT09PT09PT09PT09PT09PT09PT09PT09 PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0KLS0tIFNvdXJjZS9XVEYvQ2hh bmdlTG9nCShyZXZpc2lvbiAyODc0MTYpCisrKyBTb3VyY2UvV1RGL0NoYW5nZUxvZwkod29ya2lu ZyBjb3B5KQpAQCAtMSwzICsxLDE1IEBACisyMDIxLTEyLTIzICBTYW0gV2VpbmlnICA8d2Vpbmln QGFwcGxlLmNvbT4KKworICAgICAgICBHcmFkaWVudCBjb2xvciBpbnRlcnBvbGF0aW9uIGluY29y cmVjdCBmb3IgY29sb3JzIHdpdGggYWxwaGEgKG5lZWQgdG8gaW50ZXJwb2xhdGUgcHJlbXVsdGlw bGllZCBjb2xvcnMpCisgICAgICAgIGh0dHBzOi8vYnVncy53ZWJraXQub3JnL3Nob3dfYnVnLmNn aT9pZD0xNTA5NDAKKyAgICAgICAgPHJkYXI6Ly9wcm9ibGVtLzI1NDk5MjMyPgorCisgICAgICAg IFJldmlld2VkIGJ5IE5PQk9EWSAoT09QUyEpLgorCisgICAgICAgIEVuYWJsZSBDU1NHcmFkaWVu dFByZW11bHRpcGxpZWRBbHBoYUludGVycG9sYXRpb25FbmFibGVkIGJ5IGRlZmF1bHQuCisKKyAg ICAgICAgKiBTY3JpcHRzL1ByZWZlcmVuY2VzL1dlYlByZWZlcmVuY2VzRXhwZXJpbWVudGFsLnlh bWw6CisKIDIwMjEtMTItMjMgIEJyYWR5IEVpZHNvbiAgPGJlaWRzb25AYXBwbGUuY29tPgogCiAg ICAgICAgIEFkZCBXVEY6OlVVSUQgY2xhc3Mgd2hpY2ggaXMgbmF0aXZlbHkgYSAxMjgtYml0IGlu dGVnZXIKSW5kZXg6IFNvdXJjZS9XVEYvU2NyaXB0cy9QcmVmZXJlbmNlcy9XZWJQcmVmZXJlbmNl c0V4cGVyaW1lbnRhbC55YW1sCj09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09 PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0KLS0tIFNvdXJjZS9XVEYvU2NyaXB0cy9QcmVm ZXJlbmNlcy9XZWJQcmVmZXJlbmNlc0V4cGVyaW1lbnRhbC55YW1sCShyZXZpc2lvbiAyODc0MTIp CisrKyBTb3VyY2UvV1RGL1NjcmlwdHMvUHJlZmVyZW5jZXMvV2ViUHJlZmVyZW5jZXNFeHBlcmlt ZW50YWwueWFtbAkod29ya2luZyBjb3B5KQpAQCAtMjkwLDExICsyOTAsMTEgQEAgQ1NTR3JhZGll bnRQcmVtdWx0aXBsaWVkQWxwaGFJbnRlcnBvbGF0aW9uRW5hYmxlZDoKICAgaHVtYW5SZWFkYWJs ZURlc2NyaXB0aW9uOiAiRW5hYmxlIHByZW11bHRpcGxpZWQgYWxwaGEgaW50ZXJwb2xhdGVkIENT UyBncmFkaWVudHMiCiAgIGRlZmF1bHRWYWx1ZToKICAgICBXZWJLaXRMZWdhY3k6Ci0gICAgICBk ZWZhdWx0OiBmYWxzZQorICAgICAgZGVmYXVsdDogdHJ1ZQogICAgIFdlYktpdDoKLSAgICAgIGRl ZmF1bHQ6IGZhbHNlCisgICAgICBkZWZhdWx0OiB0cnVlCiAgICAgV2ViQ29yZToKLSAgICAgIGRl ZmF1bHQ6IGZhbHNlCisgICAgICBkZWZhdWx0OiB0cnVlCiAKICMgRklYTUU6IFRoaXMgaXMgZW5h YmxlZCB3aGVuIEVOQUJMRShFWFBFUklNRU5UQUxfRkVBVFVSRVMpIGlzIHRydWUgaW4gV2ViS2l0 Mi4gUGVyaGFwcyB3ZSBzaG91bGQgY29uc2lkZXIgdXNpbmcgdGhhdCBmb3IgV2ViS2l0TGVnYWN5 IGFzIHdlbGwuCiBDU1NJbmRpdmlkdWFsVHJhbnNmb3JtUHJvcGVydGllc0VuYWJsZWQ6Cg==