[CSS3-color] [css3-images] [css3-transitions] gradient pre-multiplied interpolation

Regarding the recent CSS minutes and interpolation of gradients.

http://www.w3.org/2011/07/25-css-irc.html#T23-50-54

> 23:50:54 [fantasai]
>     plinss: Any other gradient issues?
> 23:51:02 [fantasai]
>     Brian: Premultiplied? Keep it don't keep it have
>options?
> 23:51:26 [fantasai]
>     TabAtkins: I think premultiplied produces most
> attractive gradients in common cases blending with
> transparent.
> 23:52:02 [fantasai]
>     TabAtkins: I can go either way, depending on
> implementers
> 23:52:21 [fantasai]
>     fantasai: If you go other way, then make
> 'transparent' magic.
> 23:52:40 [fantasai]
>     TabAtkins: I don't want to make transparent magic.
> 23:54:00 [fantasai]
>     ?: Drop 'transparent' keyword, make everybody use
> rgba()
> 23:54:14 [dbaron]
>     Tab: If we're going to go non-premultiplied, then
> disallow use of 'transparent' and > make everybody use
> rgba()
> 23:54:17 [fantasai]
>     fantasai: That's horrible. You're making the author
> do the work.
> 23:54:30 [fantasai]
>     ??: You have the same problem with transitions.
> 23:54:47 [fantasai]
>     fantasai: gradient from color to tranparent is
> very common use case
> 23:55:12 [fantasai]
>     smfr: Reality is that if we go with premultiplied
> we won't have it working correctly on Mac for another year or so
> 23:55:15 [ChrisL]
>     ChrisL has joined #css
> 23:55:29 [fantasai]
>     anne: If it's just a year, I say head for the future.
> 23:55:57 [fantasai]
>     Vincent: Example of where premultiplied looks better?
> 23:56:16 [fantasai]
>     TabAtkins: yellow to transparent, in premultiplied
> goes from yellow, fading to transparent
> 23:56:31 [nimbupani]
>     http://jsfiddle.net/rK9Pd/11/show/
> 23:56:34 [fantasai]
>     TabAtkins: in non-premultilied, goes through an ugly
> grayish greeny color


To avoid that olive, you can go yellow to rgba(255,255,0,0) or yellow to 
rgba(255,255,255,0).


> 23:56:36 [nimbupani]
>     (check in webkit vs opera)
> 23:57:17 [fantasai]
>     TabAtkins: If you go red - transparent - blue, if
> you want to make it work correct in non-premultiplied,
> you have to write red, transparent-red, transparent-blue,
> blue, placing transparent-blue and transparent-red at
> the same spot in the gradient


This is correct but you would have to do the same for a gradient like this.


background: white linear-gradient(left, rgb(255,51,51), 
rgba(255,255,0,0.0) 50%, rgba(0,127,255,0.0) 50%, rgb(255,51,51));


In Opera 11.50 it goes from reddish to transparent to reddish. The other 
UAs show also pale orange (at 25%) and pale blue/purple (at 75%).


> 23:57:51 [fantasai]
>     plinss: Why don't we want to do premultiplied?
> 23:58:03 [fantasai]
>     TabAtkins: It's not natively available on some platforms
> 23:58:10 [fantasai]
>     smfr: We'd have to get libraries to add it


So Tab wants un-prefix gradients as soon as possible but it could be a 
year before this works correctly on Mac?


> 23:58:29 [glazou]
>     glazou has joined #css
> 23:59:28 [fantasai]
>     Brian: Alan Gresley was asking about non-premultiplied
> gradients because there are some cases that you'd want that
>result


And I have not had sufficient time to show the full scale of my testing.


> 23:59:53 [fantasai]
>     TabAtkins: You could simulate it by manually arc
> it through the color space, it's tricky, but doable,
> and a very uncommon case in comparison


At one time believed that it was possible to simulate. Now I am of the 
opinion that it is impossible since every color stop you add causes the 
gradient to have a banding appearance. Plus the results are not pleasant 
if the background-color is transitioned from a darkish color to a 
lightish color or visa verso. If you say it is doable, can you 
demonstrate how this is done? I know of a way, but it does not involved 
adding extra color stops.


> 00:00:13 [fantasai]
>     Brian: I had good results with Opera


The gradient path has to also appear the same when composite on a 
background-color that is also the opposite (ie. red~aqua or white~black).


> 00:00:35 [fantasai]
>     TabAtkins: With Opera and IE we'll have 2 impls,


Are you sure they are interoperable at all different alpha levels?


>  so let's stick with that.
> 00:00:45 [fantasai]
>     RESOLVED: Use premultiplied colors for gradients and transitions


One way around the issue is that when keywords are used, the gradient 
uses pre-multiplied space. If rgba() or hsla() are used, the gradient 
uses un-premultiplied space. The same can happen with transitions for 
color to color.



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Wednesday, 27 July 2011 10:53:04 UTC