- From: Amelia Bellamy-Royds <amelia.bellamy.royds@gmail.com>
- Date: Wed, 17 Feb 2016 12:35:38 -0700
- To: "Tab Atkins Jr." <jackalmage@gmail.com>
- Cc: Simon Fraser <smfr@me.com>, "www-style@w3.org list" <www-style@w3.org>, www-svg <www-svg@w3.org>
- Message-ID: <CAFDDJ7wUL0M_=BStayQMJXptTD_n=bvYpa6CUNdWXN3X2s8QcA@mail.gmail.com>
I am quite sympathetic to the argument that we should just make gradient rendering good everywhere. But in practice, Chromium at least is making visible performance-over-quality tradeoffs, displaying banding in smooth gradients and jagged pixelation on sharp transitions (in larger blocks than the actual screen resolution). Banding can also appear in subtle gradients in any rendering tool that doesn't do explicit dithering, which can be an issue with high-quality printing and SVG. If we create a new `gradient-rendering` property (instead of re-purposing `image-rendering`), that solves 2 issues: - User agents that can't control gradient rendering can simply indicate that they don't support certain values. So an `@supports (gradient-rendering: smooth) {}` rule would fail if the renderer always applies some pixel aliasing to gradients, even if they have no problem with smooth image scaling. - The keywords can be chosen to make more sense for gradients instead of for image scaling. The distinction between `crisp-edges` and `pixelated` is perhaps too confusing to factor in ( I had suggested that `crisp-edges` would alias to device pixels only for strict vertical and horizontal gradients, and use smoothing for other angles. ) And perhaps an explicit `dithered` keyword may prove useful for some implementations. Like the other *-rendering properties, these would be a "hint" from the author to the user agent; no one would be deemed non-conforming for failing to provide advanced rendering control. For reference, here are current behaviors, based on a quick test of the following two pages on a Windows laptop with a moderately good screen resolution: - CSS gradients at various angles: https://jsfiddle.net/987q718v/ - SVG gradient (center) and CSS gradient: http://oreillymedia.github.io/SVG_Colors_Patterns_Gradients/ch07-positioningGradients-files/css-gradient-direction.html Chrome: visible banding, sharp diagonal transitions aliased to ~2x2 pixel blocks Edge & Firefox: very subtle banding on the black-to-white gradients, diagonal transitions aliased to device pixels. I couldn't recreate the noticeable blurring on horizontal/vertical gradients in Firefox that I've seen designers complain about previously. Not sure if that means it's fixed or if certain other features of the gradient are required to provoke it.
Received on Wednesday, 17 February 2016 19:36:10 UTC