Bug 16045 – REGRESSION: <canvas> transparent gradient rendering in 10.5

• Component: Layout and Rendering
• Status: RESOLVED CONFIGURATION CHANGED

[Andrew Pouliot]

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.

[David Kilzer (:ddkilzer)]

Could you please find the WebKit Nightly that worked as expected?  Does Firefox or Opera render the page as expected?

[Andrew Pouliot]

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)]

(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]

Created attachment 17415 [details]
expected rendering

[Andrew Pouliot]

Created attachment 17416 [details]
actual rendering

[Andrew Pouliot]

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)]

(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)]

<rdar://problem/5610874>

[Andrew Pouliot]

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]

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]

I found that this bug is also present on WebKit when running on the iPhone.

[David Kilzer (:ddkilzer)]

(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]

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]

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)]

This reminds me of bug 6337 and might be related.

[Ahmad Saleem]

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]

I agree that the test now passes.