Re: CSS3 transition strangeness when using background-color:transparent;

On 1/29/10 3:38 AM, Oli Studholme wrote:
> Here’s a demo page:
> http://oli-studio.com/bugs/browser/transition-transparent.html
>
> I can’t see anything in CSS3 Transitions that addresses transparency
> specifically, just this note under “6. Animation of property types”:
>
> “color: interpolated via red, green, blue and alpha components
> (treating each as a number, see below)”
>
> Is this by design?

The reason you're seeing a different behavior in Gecko (the expected 
matching the observed) is due to this code comment and corresponding code:

624       // FIXME (spec): The CSS transitions spec doesn't say whether
625       // colors are premultiplied, but things work better when they are,
626       // so use premultiplication.  Spec issue is still open per
627       // http://lists.w3.org/Archives/Public/www-style/2009Jul/0050.html

In particular, the first observed behavior example is interpolating 
between rgba(255,255,255,1) and rgba(0,0,0,0).  If you do this on 
non-premultipled colors, then your background color as a function of t 
going from 0 to 1 is:

   rgba(255(1-t), 255(1-t), 255(1-t), (1-t))

Since you are then blending with your rgba(221,221,221,1) background of 
the page, the overall background color ends up as 255(1-t)^2 + 221t in 
each of the non-opacity components (with opacity 1).  This is minimized 
when t = 289/510, at which point the color component value is about 173. 
  Your text color is 170 in each color component, which gives you the 
observed behavior of background pretty much matching text at some point.

If the interpolation is done with premultiplied alpha colors (which I 
will denote as rgbap()), then you're interpolating, in premultiplied 
space, between rgbap(255,255,255,1) and rgbap(0,0,0,0).  Your background 
as a function of t is:

   rgbap(255(t-1), 255(1-5), 255(1-t), 1-t)

which happens to be the same as rgba(255, 255, 255, 1-t).  Blending with 
your page background, that gives 255(1-t) + 221t in each color 
component, with alpha 1, which is exactly a linear fade from white to 
the page background.

-Boris

Received on Friday, 29 January 2010 14:25:36 UTC