RE: [css3-images] Premultiplication switch

Alan Gresley:
(a)
> background: white -o-linear-gradient(left, red, transparent, blue);
(b)
> background: white -o-linear-gradient(left, red, rgba(255,0,0,0) 50%,
> rgba(0,0,255,0) 50%, blue);
>
> Then how is it possible that Opera renders both these gradients the
> same? One has one midpoint color stop and the other has two midpoint
> color stops.

It's fairly straightforward, IMO, given that Opera seems to be applying pre-multiplied color interpolation.

non-premultiplied
a0 red, transparent, blue
a1 red 0%, transparent 50%, blue 100%
a2 red 0%, rgba(0,0,0,0) 50%, blue 100%
premultiplied
a3 red 0%, prgba(0,0,0,0) 50%, blue 100%

non-premultiplied
b0 red, rgba(255,0,0,0) 50%, rgba(0,0,255,0) 50%, blue
b1 red 0%, rgba(255,0,0,0) 50%, rgba(0,0,255,0) 50%, blue 100%
premultiplied
b1 red 0%, prgba(0,0,0,0) 50%, prgba(0,0,0,0) 50%, blue 100%


All 7 render the same, but behave differently when transitions and animations are involved (3 stops for a0/a1/a2/a3 vs. 4 stops for b0/b1/b2).


In case it's useful, try changing transparent to rgba(0,0,0,0) in (a) and you'll notice the rendering is unchanged in browsers that use pre-multiplied color interpolation.

Another approach that might prove useful to evaluate is to use opacities of 0.5 instead of 0.

Received on Saturday, 30 July 2011 02:43:45 UTC