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.
Could you please find the WebKit Nightly that worked as expected? Does Firefox or Opera render the page as expected?
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.
(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.
Created attachment 17415 [details] expected rendering
Created attachment 17416 [details] actual rendering
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?
(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!
<rdar://problem/5610874>
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
Created attachment 17454 [details] Reduction: linear gradient I discovered that this bug also affects linear gradients, so I attached a reduction demonstrating that too.
I found that this bug is also present on WebKit when running on the iPhone.
(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!
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.
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.
This reminds me of bug 6337 and might be related.