Bug 16045

Summary: REGRESSION: <canvas> transparent gradient rendering in 10.5
Product: WebKit Reporter: Andrew Pouliot <andpoul@gmail.com>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned@lists.webkit.org>
Status: NEW    
Severity: Major CC: bdakin@apple.com, emacemac7@mac.com, mdelaney7@gmail.com
Priority: P1 Keywords: InRadar, NeedsReduction, Regression, ReviewedForRadar
Version: 523.x (Safari 3)   
Hardware: Macintosh   
OS: Mac OS X 10.5   
Attachments:
Description Flags
expected rendering
none
actual rendering
none
Reduction
none
Reduction: linear gradient none

Description From 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.
------- Comment #1 From 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?
------- Comment #2 From 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.
------- Comment #3 From 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.
------- Comment #4 From 2007-11-20 05:11:51 PST -------
Created an attachment (id=17415) [details]
expected rendering
------- Comment #5 From 2007-11-20 05:12:25 PST -------
Created an attachment (id=17416) [details]
actual rendering
------- Comment #6 From 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?
------- Comment #7 From 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!
------- Comment #8 From 2007-11-22 13:38:33 PST -------
<rdar://problem/5610874>
------- Comment #9 From 2007-11-22 14:31:13 PST -------
Created an attachment (id=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
------- Comment #10 From 2007-11-22 15:20:19 PST -------
Created an attachment (id=17454) [details]
Reduction様inear gradient

I discovered that this bug also affects linear gradients, so I attached a reduction demonstrating that too.
------- Comment #11 From 2007-11-22 15:23:47 PST -------
I found that this bug is also present on WebKit when running on the iPhone.
------- Comment #12 From 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!
------- Comment #13 From 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.
------- Comment #14 From 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.
------- Comment #15 From 2007-12-27 22:57:38 PST -------
This reminds me of bug 6337 and might be related.