Add dithering to gradient color transitions to address banding in 24-bit "truecolor"




7 years ago
28 days ago


(Reporter: Brian Hauer, Unassigned)


Firefox Tracking Flags

(Not tracked)



(1 attachment)



7 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv: Gecko/20100914 Firefox/3.6.10
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv: Gecko/20100914 Firefox/3.6.10

This is wishful thinking, but please consider adding a dithering algorithm to the gradient rendering (for example, as used by -moz-linear-gradient).  The limited colors available in 24-bit "truecolor" cause visible banding regardless of the presence of alpha.

In Firefox, the banding is especially perceivable with vertical gradients.  This is because web content so often scrolls vertically.  The color transitions are made more recognizable when scrolling/moving the content.

Bug 619834 cites banding when alpha is used, but the banding exists in both cases.  Banding is perhaps more severe with alpha or affected by an unrelated bug, but that's not the matter at hand here.

The test case I am attaching shows vertical gradients and the subtle but nevertheless quite recognizable color transitions.  These are visible on Windows 7; I have not tested any other platform.  I don't know anything about the internals of Gecko's gradient rendering, but if a dithering algorithm were somehow introduced, this minor issue could be eliminated.

As an aside, weren't 30-bit or 32-bit color depths introduced in the 1990s?  It's a pity we're still stuck with 24-bit.

Reproducible: Always

Steps to Reproduce:
See test case.
Actual Results:  
On Windows 7, visible color transitions are seen.

Expected Results:  
With 32-bit color, the transitions would be imperceptible.  In 24-bit color, a dithering algorithm could help achieve the same result.

Comment 1

7 years ago
Created attachment 505838 [details]
An example with vertical gradients using both non-alpha and alpha colors
Component: Layout: View Rendering → Graphics
QA Contact: layout.view-rendering → thebes

Comment 2

6 years ago
Perhaps, a new css attribute which specify how much dithering to use.

background: -moz-linear-gradient(left, #E7E7E2, #CDCDCD, dither: 20%);

Comment 3

6 years ago
I just noticed this on youtube's background, which uses a #555 to #333 greyscale gradient. That only yields 34 possible color stops over several 100 pixels in height, i.e. it's noticeable. Dithering certainly would help here.
QA Contact: thebes → jmuizelaar


4 years ago
Duplicate of this bug: 876125


3 years ago
See Also: → bug 1001455

Comment 5

3 years ago
It looks like this could be beneficial for b2g memory usage.  See bug 1001455.  Is there any way to get it on the roadmap?
Ever confirmed: true
Flags: needinfo?(milan)

Comment 6

3 years ago
The author of madVR recently evaluated/implemented several dithering algorithms for dithering 16bit video in realtime (via GPU shaders) to 8bit.

A modified form of ordered dithering called void-and-cluster was found to be trivial to parallelize (unlike various error diffusion algorithms), leaving no visible patterns (unlike ordered dithering) and without introducing too much visual noise (unlike random threshold dithering).
This sounds like the right thing to do - can we get "product" to ask for this and explain the benefits?  I see them, but I'm not sure I'm representative of the overall Firefox audience :)  Maybe somebody from UX?
Flags: needinfo?(milan)
Duplicate of this bug: 1007670
Blocks: 803299
This should be resolved once webrender is enabled, per
You need to log in before you can comment on or make changes to this bug.