Bug 90339 – Gradient do not dither

• Status: NEW
• Component: SVG

[Isaac Shapira]

Gradients do not dither from SVG or css3 gradients. This coupled with the lower color depth supported for gradients in webkit (Chrome more than Safari), (compared to IE an FF), leads to irreparable banding on subtle gradients. Please implement automatic or configurable dithering on gradient rendering.  And thanks. You guys make the absolute best layout and rendering engine out there. I love you forever.

http://stackoverflow.com/questions/11269074/svg-banding-in-chrome

[Jake Archibald]

I image there's a significant performance hit with dithering, if so it sounds like something that should be enabled when colour changes per pixel goes below a value likely to result in banding.

Bugzilla ticket https://bugzilla.mozilla.org/show_bug.cgi?id=627771
Banding article http://tiamat.tsotech.com/24-bit-color-sucks

[Brent Fulgham]

Looks like this is still an issue on all browsers.

[Radar WebKit Bug Importer]

<rdar://problem/97097227>

[Benoît Rouleau]

Interestingly, CSS gradients (e.g. `linear-gradient`, `radial-gradient`, etc.) look much better (no banding) when colors are specified in HEX format than in `rgb()` or even `color()` (I tried `display-p3` and there was still a lot of banding).

See https://twitter.com/henryheffernan/status/1632802901063262209 / https://codepen.io/henryjeff/pen/oNPBaGN

[Benoît Rouleau]

Sorry, my last comment is wrong. It is the transparency (`rgba()`) that is causing the banding, not the fact that it's not HEX (`rgb()` and `color()` are also fine). I got confused because in my project, something else was causing banding, but I can't reproduce it now.