Re: [CSS4 color][CSS4 transition] color pre-multiplied vs non pre-multiplied was (Re: [CSSWG] Minutes TPAC Tue 2012-10-30 AM I: Abstract Directions, Transforms, Transitions)

So, can we fix the spec?
I volunteer to fix the implementation in FF and WK.

On Thu, Jan 31, 2013 at 7:00 PM, Alan Gresley <alan@css-class.com> wrote:

> On 25/11/2012 8:14 AM, Rik Cabanier wrote:
>
>> On Thu, Nov 22, 2012 at 2:39 AM, Alan Gresley <alan@css-class.com>
>> wrote:
>>
>
>  Tab: Because CSS gradient has been pre-multiplied for a while.
>>>>
>>>>
>>> But still FF17, Chrome 23 and Safari 5.1.7 show gradients in non
>>> pre-multiplied for what is now longer that a year since it was
>>> resolved that they shouldn't because supposedly authors may not
>>> understand that 'transparent' is shorthand for 'transparent-black'.
>>> The reasoning behind this resolution is ill founded.
>>>
>>>
>> I agree. It's interesting that they are still using
>> non-premultiplied colors.
>>
>
> FF16+ does one better. It supports _un-prefixed_ gradients using
> non-premultiplied colors.
>
> <!DOCTYPE html>
>
> <style type="text/css" media="screen">
> div {
>   border: 1em solid #555;
>   padding: 1em;
>   background: linear-gradient(to right, rgba(255,0,255,0),
> rgba(255,255,0,1) 50%, rgba(255,0,255,0)), linear-gradient(to right, white,
> white 50%, black 50%, black);
> }
>
> </style>
>
> <div>Gradients using non-premultiplied colors</div>
>
>
>
>
>  Dino: benefit of pre-mul is you don't gray when animating to
>>>> transparent. And can solve it by going to rgb(...)
>>>>
>>>>
>>> You do *NOT* go to gray with pre-mul unless the initial color is
>>> white or somewhere between white and black (within the grayscale).
>>>
>>>
>> No, you can go to gray if for any of the interpolated values, r/g/b
>> become approximately the same value.
>>
>
> As Dino said "you don't go gray when animating to transparent." He
> referring to the grayish (or less saturated color) midpoints when going
> from color to transparent black. This is most noticeable when composite on
> a whitish backgrounds.
>
> <!DOCTYPE html>
>
> <style type="text/css" media="screen">
> div {
>   border: 0.25em solid #555;
>   padding: 1em;
>   background: linear-gradient(to right, white, transparent);
> }
> </style>
>
> <div>Gradients using non-premultiplied colors</div>
>
>
> This was always the main issue. When animating or transitioning from one
> color to another color where one of the colors was transparent-black.
>
>
>
> Alan
>
>
> --
> Alan Gresley
> http://css-3d.org/
> http://css-class.com/
>

Received on Friday, 1 February 2013 03:25:31 UTC