RESOLVED CONFIGURATION CHANGED 16045
REGRESSION: <canvas> transparent gradient rendering in 10.5
https://bugs.webkit.org/show_bug.cgi?id=16045
Summary REGRESSION: <canvas> transparent gradient rendering in 10.5
Andrew Pouliot
Reported 2007-11-18 22:18:12 PST
A radial gradient rendering bug in <canvas>, where under certain conditions, we see improper display. This did not happen in ~late summer builds of webkit. Steps to reproduce: 1) Load http://darknoon.com/organics/render.html 2) Notice the square border visible around the inner circular area. This is a bug. In the example page, this is the relevant code: function makeMaskGradient() { gradient = ctx.createRadialGradient(300, 300, 250/*inner rad*/, 300, 300, 300/*outer rad*/); gradient.addColorStop(0.00, "rgba(" + pageBackground + ", 0.0)"); gradient.addColorStop(0.8, "rgba(" + pageBackground + ", 0.1)"); gradient.addColorStop(0.97, "rgba(" + pageBackground + ", 0.3)"); gradient.addColorStop(1.0, "rgba(" + pageBackground + ", 1.0)"); return gradient; } webkit now seems to freak out about the transition from colors at 0.97 and 1.0, jumping up in opacity from 0.3 to 1.0; I'll try to work on a reduction, but the issue should be clear here. The actual rendering is that even after the 1.0 level is met, outside values (after the gradient transition) do not have the appearance of 1.0; they stay partially transparent, which is not good for the rendering of my program. I'm looking at a workaround, but none is immediately clear besides using an image instead of a gradient.
Attachments
expected rendering (247.51 KB, image/png)
2007-11-20 05:11 PST, Andrew Pouliot
no flags
actual rendering (310.49 KB, image/png)
2007-11-20 05:12 PST, Andrew Pouliot
no flags
Reduction (444 bytes, text/html)
2007-11-22 14:31 PST, Andrew Pouliot
no flags
Reduction: linear gradient (438 bytes, text/html)
2007-11-22 15:20 PST, Andrew Pouliot
no flags
Safari 15.5 matches other browsers (783.69 KB, image/png)
2022-06-01 14:46 PDT, Ahmad Saleem
no flags
David Kilzer (:ddkilzer)
Comment 1 2007-11-18 23:07:27 PST
Could you please find the WebKit Nightly that worked as expected? Does Firefox or Opera render the page as expected?
Andrew Pouliot
Comment 2 2007-11-18 23:58:24 PST
Yes, renders correctly in Firefox. I don't know about Opera. I tried to run old builds of WebKit, but they seemed to fail under Leopard. I have some Tiger machines at work I could try on.
David Kilzer (:ddkilzer)
Comment 3 2007-11-19 21:12:37 PST
(In reply to comment #2) > Yes, renders correctly in Firefox. I don't know about Opera. I tried to run old > builds of WebKit, but they seemed to fail under Leopard. I have some Tiger > machines at work I could try on. This may be a Leopard-only issue as WebKit Nightly r27887 with Safari 3.0.4 on Mac OS X 10.4.11 (8S165) Tiger looks the same as Firefox 2.0.0.9. Attaching a screenshot of the issue may be helpful.
Andrew Pouliot
Comment 4 2007-11-20 05:11:51 PST
Created attachment 17415 [details] expected rendering
Andrew Pouliot
Comment 5 2007-11-20 05:12:25 PST
Created attachment 17416 [details] actual rendering
Andrew Pouliot
Comment 6 2007-11-22 13:32:26 PST
Yes, I can now confirm that this is a 10.5-only rendering issue. Latest webkit on 10.4 gives proper result, but on 10.5, it renders incorrectly. Maybe it's a coregraphics issue? What API does WebKit use to do drawing?
David Kilzer (:ddkilzer)
Comment 7 2007-11-22 13:37:27 PST
(In reply to comment #6) > Yes, I can now confirm that this is a 10.5-only rendering issue. > Latest webkit on 10.4 gives proper result, but on 10.5, it renders incorrectly. > Maybe it's a coregraphics issue? What API does WebKit use to do drawing? Could you create a simple reduced test case demonstrating the issue? Thanks!
David Kilzer (:ddkilzer)
Comment 8 2007-11-22 13:38:33 PST
Andrew Pouliot
Comment 9 2007-11-22 14:31:13 PST
Created attachment 17451 [details] Reduction Correct rendering (10.4): blue circle in upper left, red elsewhere Incorrect rendering (10.5): blue circle in upper left, purple elsewhere
Andrew Pouliot
Comment 10 2007-11-22 15:20:19 PST
Created attachment 17454 [details] Reduction: linear gradient I discovered that this bug also affects linear gradients, so I attached a reduction demonstrating that too.
Andrew Pouliot
Comment 11 2007-11-22 15:23:47 PST
I found that this bug is also present on WebKit when running on the iPhone.
David Kilzer (:ddkilzer)
Comment 12 2007-11-22 16:13:52 PST
(In reply to comment #11) > I found that this bug is also present on WebKit when running on the iPhone. Wow! Thanks for the reduction and the iPhone testing!
Andrew Pouliot
Comment 13 2007-11-23 14:44:10 PST
I added a workaround to the code at http://darknoon.com/organics/render.html, so it should no longer be used as a testcase. See reductions. The workaround is to set the last color stop a bit before 1.0. The bug is then not triggered. Even so, the gradient rendering is not as pretty as before. The edges of the circle look more pixelated under Leopard than they do under Tiger.
Andrew Pouliot
Comment 14 2007-11-23 14:46:22 PST
This issue might be related to the discussion of bug 6060, which describes a performance issue with gradient rendering. The resolution to that performance issue might be a less beautiful but faster rendering of gradients in Leopard coregraphics.
Eric Seidel (no email)
Comment 15 2007-12-27 22:57:38 PST
This reminds me of bug 6337 and might be related.
Ahmad Saleem
Comment 16 2022-06-01 14:46:58 PDT
Created attachment 459935 [details] Safari 15.5 matches other browsers I was not able to reproduce this bug using attached "reduction" cases (only attached screenshot of one test case) on Safari 15.5 on macOS 12.4. All browsers display the output same as shown in the picture. I tested "linear regression" as well but it was matching as well. If it is not intended test behavior and I did some mistake in reproduction. Please retest accordingly. Else this can be marked as "RESOLVED INVALID" or "RESOLVED CONFIGURATION CHANGED". Thanks!
Alexey Proskuryakov
Comment 17 2022-06-01 18:44:17 PDT
I agree that the test now passes.
Note You need to log in before you can comment on or make changes to this bug.