1943302 - Color banding in CSS gradient

Status: NEW

(Core :: Graphics, defect)

Description

[Foxxy09]

Attachment: grad.html

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Steps to reproduce:

Hi. there are some style issues regarding gradients, they look like piano keys or transition borders are visible, which is not observed in other browsers. Browser settings are set to default. You can test the attached file for clarity.

Actual results:

Hi. there are some style issues regarding gradients, they look like piano keys or transition borders are visible, which is not observed in other browsers. Browser settings are set to default. You can test the attached file for clarity.

Expected results:

Hi. there are some style issues regarding gradients, they look like piano keys or transition borders are visible, which is not observed in other browsers. Browser settings are set to default. You can test the attached file for clarity.

Comment 1

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

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Erich Gubler [:ErichDonGubler] (he/him)]

I'm not able to reproduce on Windows 11 or on my M1 MacBook Pro with latest macOS. Foxxy09, can you please also send some screenshots?

Comment 3

[Erich Gubler [:ErichDonGubler] (he/him)]

Escalating to triage to see if we can get these symptoms reproduced.

Comment 4

[Foxxy09]

Attachment: Bad_FF_bug.png

its screenshot of Firefox screen <style> of linked first .html file

Comment 5

[Foxxy09]

Attachment: Chrome_Good.png

Its right <style> gradient render in Chrome, DuckDuckGo also is alright

Comment 6

[Foxxy09]

Attachment: DDGo_Good.png

DuckDuckGo browser is allright <style> render.

Comment 7

[Erich Gubler [:ErichDonGubler] (he/him)]

:ahale and :nical might be interested in looking at this at some point.

Comment 8

[Foxxy09]

Attachment: MS_EDGE_good.png

Microsoft Edge <style> is good render.

Comment 9

[Kelsey Gilbert [:jgilbert]]

Oh, by "piano keys effect" I think you mean color banding. It's very faint on my computer and monitor.
I do baaaarely see it. @ahale might be better at the acuity for this, but I can use the live color picker (Win+Shift+S) to see hard banding steps for values in Firefox but alternating dither values in Chrome.
I can definitely confirm that in this case, Firefox is banding while Chrome is dithering.

Comment 10

[Kelsey Gilbert [:jgilbert]]

Attachment: firefox-banding-left--chrome-dithered-right.png

Comment 11

[Foxxy09]

used (executed) at Win10 with Nvidia RTX (its all)

Comment 12

[thiagobaldino5]

I switched from Firefox to Safari because of this 1 or 2 years ago