1918923 - conic-gradient with hsl interpolation contains weird line

Status: VERIFIED FIXED

(Core :: Graphics, defect)

Description

[bugzilla]

Attachment: test.html

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:130.0) Gecko/20100101 Firefox/130.0

Steps to reproduce:

I was trying to create a color wheel using conic-gradient and hsl interpolation.
See the attached html file

Actual results:

most of the time the gradient renders as expected, but when resizing the window or zooming, sometimes a horizontal green line appears from the left edge to the center of the screen

Comment 1

[bugzilla]

Attachment: screenshot.png

Comment 2

[Francesco Lodolo [:flod]]

Not sure if it's the same as bug 1918865 (different gradient, same problem with a white line)

Comment 3

[Alice0775 White]

I can reproduce the issue on Nightly132.0a1 Windows11.
It depends on the height of the viewport.

STR

1. Open the test.html
2. Reduce and/or increase the height of browser window

Regression window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=4268f51cf410ef67d5cf253ab6df18bcf6bbba51&tochange=eb5eb6f5972ff537d2f189e3d2ebb2ba2d087857

Comment 4

[BugBot [:suhaib / :marco/ :calixte]]

:nical, since you are the author of the regressor, bug 1887837, could you take a look? Also, could you set the severity field?

For more information, please visit BugBot documentation.

Comment 5

[Nicolas Silva [:nical]]

Attachment: wrench capture of the test case

I haven't had time to look into it yet, but here is a reduced wrench capture of the test case showing the issue.

Comment 6

[Sébastien]

Attachment: downloads_progress_indicator.png

I think that the issue also manifests itself with the downloads progress indicator icon in the UI. If a download is between 25% and 75%, I see a spurious blue line at the 75% mark.

Looking at the code in gfx/wr/webrender/res/ps_quad_conic_gradient.glsl, the function approx_atan2 ends with this:
r = r * sign(y);
That's problematic if y=0, because in that case sign(y)=0 and the function returns 0, whereas it should return pi. That explains why the radius at angle pi has the color meant for the angle 0.

Maybe it should do something like this instead:
r = if_then_else(float(y >= 0.0), r, -r);

Comment 7

[Jonathan Kew [:jfkthame]]

I was able to reproduce this on my Windows machine (it's a bit intermittent, depending on the window size and screen resolution/zoom level, but playing about with the window size triggers it easily), and confirmed that Sébastien's diagnosis in comment 6 appears to be correct. Applying a simple fix to avoid the use of sign(y) there resolves the glitch.

Comment 8

[Jonathan Kew [:jfkthame]]

(In reply to Francesco Lodolo [:flod] from comment #2)

Not sure if it's the same as bug 1918865 (different gradient, same problem with a white line)

This is specifically the conic-gradient shader, and there's no other use of the sign() function in the gfx/wr/webrender/res/*.glsl shaders, afaics. So although that does look like quite a similar glitch, it must be a somewhat different issue.

Comment 9

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1918923 - Avoid conic-gradient rendering glitch due to evaluating sign(0.0). r=nical,#gfx-reviewers

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4d5d99a824eb
Avoid conic-gradient rendering glitch due to evaluating sign(0.0). r=gfx-reviewers,lsalzman

Comment 11

[pstanciu]

https://hg.mozilla.org/mozilla-central/rev/4d5d99a824eb

Comment 13

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

Reproducible on a 2024-09-15 Nightly build on Windows 10, using the testcase in Comment 0.
Verified as fixed on Firefox 133.0b3 and Firefox Nightly 134.0a1 on Windows 10, Ubuntu 22, macOS 14.