Open Bug 1943302 Opened 17 days ago Updated 9 days ago

Color banding in CSS gradient

Categories

(Core :: Graphics, defect)

Firefox 136
defect

Tracking

()

People

(Reporter: 9999alf9999, Unassigned)

References

(Blocks 1 open bug)

Details

Attachments

(6 files)

Attached file 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.

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.

Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core
Component: CSS Parsing and Computation → Graphics

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?

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

Blocks: gfx-triage
Attached image Bad_FF_bug.png

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

Attached image Chrome_Good.png

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

Attached image DDGo_Good.png

DuckDuckGo browser is allright <style> render.

Severity: -- → S3

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

Attached image MS_EDGE_good.png

Microsoft Edge <style> is good render.

Blocks: wr-gradients

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.

Status: UNCONFIRMED → NEW
Ever confirmed: true
Summary: Rendering gradient style trouble → Color banding in CSS gradient

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

See Also: → 627771
No longer blocks: gfx-triage
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: