- From: Simon Fraser <smfr@me.com>
- Date: Thu, 31 Jan 2013 23:18:07 -0800
- To: Rik Cabanier <cabanier@gmail.com>
- Cc: Alan Gresley <alan@css-class.com>, fantasai <fantasai.lists@inkedblade.net>, "www-style@w3.org" <www-style@w3.org>
- Message-id: <1EB6212F-81A6-49BB-8628-B2E46CFEB4FF@me.com>
We rely on Core Graphics to render gradients on Mac, and that can't do pre-multiplied. That's the main reason why gradients don't match transitions.
Simon
On Jan 31, 2013, at 7:25 PM, Rik Cabanier wrote:
> 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 07:18:37 UTC