User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:22.214.171.124) Gecko/20100914 Firefox/3.6.10 Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:126.96.36.199) 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.
Created attachment 505838 [details] An example with vertical gradients using both non-alpha and alpha colors
6 years ago
Perhaps, a new css attribute which specify how much dithering to use. background: -moz-linear-gradient(left, #E7E7E2, #CDCDCD, dither: 20%);
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.
It looks like this could be beneficial for b2g memory usage. See bug 1001455. Is there any way to get it on the roadmap?
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?
a year ago
This should be resolved once webrender is enabled, per https://github.com/servo/webrender/pull/966