User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:18.104.22.168) Gecko/20100914 Firefox/3.6.10 Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:22.214.171.124) 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.
Component: Layout: View Rendering → Graphics
QA Contact: layout.view-rendering → thebes
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?
Status: UNCONFIRMED → NEW
Ever confirmed: true
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?
5 years ago
3 years ago
This should be resolved once webrender is enabled, per https://github.com/servo/webrender/pull/966
What's the progress on this issue now? I can see the PR was merged last year, but I still see some banding in gradients when comparing with Safari, where gradients are flawlessly smooth. Not sure if the current rendering is the result after an improvement, or do we have more ways to go?
(In reply to Hansol Kim (zvuc) from comment #10) > What's the progress on this issue now? I can see the PR was merged last > year, but I still see some banding in gradients when comparing with Safari, > where gradients are flawlessly smooth. Not sure if the current rendering is > the result after an improvement, or do we have more ways to go? It's dependent on WebRender being enabled in Firefox, which is currently still in development. If you're on Nightly, you can enable WebRender by going to about:config and setting gfx.webrender.all to true.
You need to log in before you can comment on or make changes to this bug.