676173 - Canvas globalAlpha for radial gradient doesn't work with hardware acceleration

Status: RESOLVED FIXED

(Core :: Graphics, defect)

Description

[Matt Palmerlee]

Attachment: canvas-hw-accel-test.html

User Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/534.30 (KHTML, like Gecko) Chrome/12.0.742.122 Safari/534.30

Steps to reproduce:

Use firefox 5 (or 6 beta) in hardware acceleration mode. Create an html5 canvas, call createRadialGradient on the canvas context, then call addColorStop for the radial gradient, set the globalAlpha before calling fillRect on the canvas context to draw the radial gradient.


Actual results:

When hardware acceleration is turned on, and globalAlpha is modified before drawing a radial gradient, Firefox 5 doesn't render the radial gradients or performance is very slow.


Expected results:

Radial gradients should be rendered to the canvas based on the globalAlpha setting.  IE 9 and Chrome seem to handle this scenario fine, Firefox 5 with hardware acceleration turned on doesn't, without hardware acceleration turned on Firefox 5 loads this page sucessfully.  Also without setting the globalAlpha on the canvas context with hardware acceleration Firefox 5 loads this page fine.

Comment 1

[Matt Palmerlee]

I don't think that creating the radial gradients is necessary to show this issue, I believe that this issue can be reproduced using other drawing primitives and setting globalAlpha but I have not had time to create a test case for this.

Comment 2

[Jeff Muizelaar [:jrmuizel]]

Does this happen in FF4?

Comment 3

[Matt Palmerlee]

I'm not sure, I tested this in FF 6 beta and it still seemed to be an issue.  I'll see if I can install FF 4 and check it out.

Comment 4

[Matt Palmerlee]

I was able to test in FF 4.0.1 and I had the same behavior, with H/W acceleration turned on my test page doesn't render anything bug a black box, with H/W acceleration turned off it works (but it seems a bit slow).

Comment 5

[Bas Schouten (:bas.schouten)]

This is fixed in Azure (so for 7). So this is most likely an issue in how the traditional canvas code (or the Cairo D2D backend) deals with the opacity.

Comment 6

[AndreiD[QA]]

(In reply to comment #5)
> This is fixed in Azure (so for 7). So this is most likely an issue in how
> the traditional canvas code (or the Cairo D2D backend) deals with the
> opacity.

You're right. The html test file works in Aurora (FX7) and Nightly (FX8):
 Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0a1) Gecko/20110802 Firefox/8.0a1
 Mozilla/5.0 (Windows NT 6.1; WOW64; rv:7.0a2) Gecko/20110802 Firefox/7.0a2

and the issue is reproducible on Beta (FX6):
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:6.0) Gecko/20100101 Firefox/6.0

So setting this as Resolved. But we'll watch this bug to verify that the issue is still resolved when FX7 is launched in the future (probably October)

Comment 7

[Matt Palmerlee]

Thanks for confirming that, I look forward to the version 7 release. In the meantime I'll just disable the hardware acceleration in version 5.

Comment 8

[Bas Schouten (:bas.schouten)]

Attachment: Properly revoke clip after having filled

There's a bug here in the Canvas code. On a codepath that only gets hit with D2D (non-d2d will use an intermediate surface in this function). It's clipping but not properly removing the clip when done.

Comment 9

[Jeff Muizelaar [:jrmuizel]]

Comment on attachment 550716 [details] [diff] [review]
Properly revoke clip after having filled

Please add a reftest.

Comment 10

[Matt Palmerlee]

Attachment: Deterministic version of globalAlpha problem without randomness

This attachment removes the randomness from the original bug attachment is so that a reftest can be created.

Comment 11

[Matt Palmerlee]

I'm kinda a newb when it comes to bugzilla but it sounds like to create a reftest you need a repeatable test, I've uploaded a new testcase that doesn't generate a random starfield and just creates some radial gradients with different global alpha settings.
Hope this helps for creating the reftest for that patch posted.

Comment 12

[Bas Schouten (:bas.schouten)]

Yeah, a much simpler testcase can be used to demonstrate this. I'm not sure if it warrants a reftest though. This is a very implementation-specific bug. It's unlikely the reftest would be of any use.

Comment 13

[Matt Palmerlee]

Ok, thanks. Glad to hear you found the problem!

Comment 14

[Robert O'Callahan (:roc) (email my personal email if necessary)]

(In reply to comment #12)
> Yeah, a much simpler testcase can be used to demonstrate this. I'm not sure
> if it warrants a reftest though. This is a very implementation-specific bug.
> It's unlikely the reftest would be of any use.

I think it's still worth having.

Comment 15

[Robert O'Callahan (:roc) (email my personal email if necessary)]

This was actually FIXED by the Azure landing.

Comment 16

[Stanislaw Osinski]

The problem is still present in Firefox 22 on Windows (Mozilla/5.0 (Windows NT 6.1; WOW64; rv:22.0) Gecko/20100101 Firefox/22.0). Disabling hardware acceleration through the Options window restores the correct rendering.

Comment 17

[Joe Drew (not getting mail)]

Stanislaw, can you paste the graphics section of your about:support here?

Comment 18

[Stanislaw Osinski]

Here it is:


  Graphics

        Adapter Description
        Intel(R) HD Graphics Family

        Adapter Drivers
        igdumd64 igd10umd64 igd10umd64 igdumdx32 igd10umd32 igd10umd32

        Adapter RAM
        Unknown

        ClearType Parameters
        DISPLAY1 [ Gamma: 2200 Pixel Structure: RGB ClearType Level: 100 Enhanced Contrast: 50 ] DISPLAY2 [ Gamma: 2200 Pixel Structure: RGB ClearType Level: 100 Enhanced Contrast: 50 ]

        Device ID
        0x0122

        Direct2D Enabled
        true

        DirectWrite Enabled
        true (6.2.9200.16492)

        Driver Date
        8-31-2011

        Driver Version
        8.15.10.2509

        GPU #2 Active
        false

        GPU Accelerated Windows
        1/1 Direct3D 10

        Vendor ID
        0x8086

        WebGL Renderer
        Google Inc. -- ANGLE (Intel(R) HD Graphics Family)

        AzureCanvasBackend
        direct2d

        AzureContentBackend
        direct2d

        AzureFallbackCanvasBackend
        cairo

Comment 19

[Joe Drew (not getting mail)]

That's very surprising. Maybe we regressed this?

Comment 20

[Stanislaw Osinski]

If you need any more details about my setup or the canvas code I'm running, let me know.

Comment 21

[Dusan Halicky]

I've encountered this issue right now with Firefox 70.0.1 64bit on 2 customer's machines:

• Windows 10, version 1809 build 17763.805, graphics card is NVIDIA GeForce GTX 1060 6GB
• Windows 10, version 1903 build 18362.356, graphics Intel UHD Graphics 620

Here is demo: https://jsfiddle.net/yxqojbdf/1/

On customer's machines both circles has same bright green color:
Broken: https://ghost.sk/url/39.jpg

On all my machines (linux, ff 70 64bit) and in Chromium/Chrome I see left circle dark green, right circle very faint green (opacity 0.1):
Working: https://ghost.sk/url/40.jpg

It also works on every single virtual I tested which leads me to believe it is hardware acceleration issue.