RE: [css3-image] gradients from color to full alpha transparency (was Re: [CSS3] support for linear-gradients & radial-gradients)

There are two issues at play here that I am aware of, w/r/t IE10 Preview 1:
(1) Preview 1 is using non-premultiplied for color interpolation.  As mentioned at least 5 times on this alias, this was documented in the blog related to CSS3 gradients around the release of Preview 1.
(2) Preview 1 renders rgba(a,b,c,1.0)-to-transparent similarly to rgba(a,b,c,0)-to-rgba(255,255,255,0) rather than rgba(a,b,c,0)-to-rgba(0,0,0,0) as would be expected giving the definition of transparent as equivalent to rgba(0,0,0,0) in CSS.

The simplest workaround for (2) is to use translations such as rgba(a,b,c,1.0)-to-rgba(a,b,c,0.0) to simulate (1).  If one chose to change the spec to require non-premultiplied translation, I would recommend that we suggest authors that prefer the premultiplied interpolation rendering use this workaround to get the "non-dirty" rendering they prefer.

The solution for (1) [which makes (2) a non-issue] is to the interpolation as per spec -- in the premultiplied space rather than the non-premultiplied space.  A future build of IE will be addressing this.

All of the above have been discussed in depth internally but, to my knowledge, there wasn't much public discussion about the premultiplied vs. non-premultiplied issue.  As such, none of that internal discussion spilled over into the public space to avoid distracting from other issues that were plaguing the specification (such as the angle coordinate system change).

Let me know if you have any additional questions on the IE side on this topic.

Thanks
-Brian


> -----Original Message-----
> From: Alan Gresley [mailto:alan@css-class.com]
> Sent: Sunday, June 26, 2011 4:41 AM
> To: Brian Manthos; CSS 3 W3C Group
> Cc: Tab Atkins Jr.
> Subject: [css3-image] gradients from color to full alpha transparency
> (was Re: [CSS3] support for linear-gradients & radial-gradients)
> 
> CC www-style.
> 
> On 25/06/2011 5:58 AM, Brian Manthos wrote:
> > Not enough context.  What was the original issue?
> > -Brian
> 
> The original issue was that gradients from <color> to 'transparent'
> look
> black-ish (dirty or ugly) in the middle when transitioned in multiplied
> (non-premultiplied) space [1] (see bottom of message). This developed
> quickly into a quick discussion between Tab and Boris about the
> mathematics [2]. I come along and say that there is a precise maths in
> color [3].
> 
> (Please note that Boris' maths is what you would expect from someone
> from MIT where my simple maths is that of sRGB color-space when
> represented as a X, Y, Z matrix - not to be confused with x, y, z
> floating points of monochromatic color)
> 
> I added later in some thread that the black-ish (dirty or ugly)
> midpoint
> of such gradients are what one would expect when composite over light
> backgrounds. It became largely a debate between Tab and I which lasted
> for months until his reply this year [4] which is the message which I
> replied to two nights ago. During the initial discussions CIE
> colorspace, sGRB, scRGB, monochromatic color and CSS3 color was also a
> hot topic for discussion [5].
> 
> The crux of the propose change is that <color> to 'transparent' will
> not
> behave as <color> to rgba(0,0,0,0) (the current behavior of 1E10,
> Gecko,
> WebKit and Opera) but from <color> to rgba(255,255,255,0) which is the
> behavior that IE10 has for such gradients. Also the current gradient
> from <color> to rgba(0,0,0,0) are supposed to be changed, thus my half
> life gradient scaling.
> 
> Now out in the web development community, gradients of all natures have
> become the cool new feature of CSS3 and some of the demonstrations have
> been with gradients from <color> to 'transparent'. In May this year,
> Divya Manian gave a presentation at Web Directions in Seattle where in
> part, she discusses this demonstration (please view in Firefox 5 or
> WebKit).
> 
> http://nimbu.in/unplugged/demos/gradient.html

> 
> Now this is one of the gradients affects that will be affected when the
> change happens in other browsers for gradients from <color> to
> 'transparent'.
> 
> <!doctype html>
> 
> <style type="text/css">
> div {
>    width: 800px;
>    height: 100px;
>    background: black -webkit-linear-gradient(left, indianred,
> transparent);
>    background: black -moz-linear-gradient(left, indianred,
> transparent);
>    background: black -ms-linear-gradient(left, indianred, transparent);
>    background: black -o-linear-gradient(left, indianred, transparent);
> }
> </style>
> 
> <div></div>
> 
> 
> The simple solution is this.
> 
> <!doctype html>
> 
> <style type="text/css">
> div {
>    width: 800px;
>    height: 100px;
>    background: black -webkit-linear-gradient(left, indianred,
> rgba(0,0,0,0));
>    background: black -moz-linear-gradient(left, indianred,
> rgba(0,0,0,0));
>    background: black -ms-linear-gradient(left, indianred,
> rgba(0,0,0,0));
>    background: black -o-linear-gradient(left, indianred,
> rgba(0,0,0,0));
> }
> </style>
> 
> <div></div>
> 
> 
> According to what I been told on this list, the above behavior of the
> above gradient should not work like that, thus my half life gradient
> scaling. I don't know why an author should have to convert indianred
> (or
> any other keyword color) to rgb color 'rgb(205,92,92)' and use the
> scaling (below) to achieve such a gradient which won't be the same
> since
> I have scaled down to rgb(3,1,1) using uneven scaling steps.
> 
> linear-gradient(left, indianred, rgba(102,46,46,0.5) 50%,
> rgba(51,23,23,0.25) 75%, rgba(25,11,11,0.125) 87.5%,
> rgba(12,5,5,0.0625)
> 93.75%, rgba(6,2,2,0.03125) 96.875%, rgba(3,1,1,0.015625) 98.4375%,
> rgba(0,0,0,0))
> 
> 
> 
> [1] http://lists.w3.org/Archives/Public/www-style/2010Aug/0587.html

> [2] http://lists.w3.org/Archives/Public/www-style/2010Aug/0590.html

> [3] http://lists.w3.org/Archives/Public/www-style/2010Aug/0594.html

> [4] http://lists.w3.org/Archives/Public/www-style/2011Feb/0282.html

> [5] http://lists.w3.org/Archives/Public/www-

> style/2010Sep/thread.html#msg313
> 
> 
> 
> --
> Alan Gresley
> http://css-3d.org/

> http://css-class.com/

Received on Sunday, 26 June 2011 20:09:48 UTC