Re: [css3-images] Order of color-stop fixup

On Fri, Aug 12, 2011 at 5:23 AM, Shane Stephens <shans@google.com> wrote:
> On Fri, Aug 12, 2011 at 5:05 AM, Brian Manthos <brianman@microsoft.com>
> wrote:
>> Interpolate after knowing container size information rather than
>> before...
>
> Obviously I didn't explain the example clearly enough. Here's the CSS again.
> .box {
>   width: 100px;
>   height: 100px;
>   background: radial-gradient(center, ellipse contain, red, blue);
>   -webkit-transition-property: width, height, background;
>   -webkit-transition-duration: 1s, 1s, 2s;
> }
> .box:hover {
>   width: 200px;
>   height: 200px;
>   background: -webkit-radial-gradient(center, ellipse contain, blue, black);
> }
>
> The only data of interest here is the gradient size. At the beginning of the
> interpolation (unhovered), it's 50px (the ellipse is in the center of a
> 100px x 100px square and is contained within that square). After 2 seconds
> (fully hovered) it's 100px.
>
> If you use render-time interpolation, resolving sizes down to pixel values
> before interpolation, then at 50% the size of this ellipse must be 75px
> (50px x 0.5 + 100px x 0.5). However, 50% is 1 second into the animation, at
> which point the box size is 200px x 200px, which means that halfway between
> the gradient's interpolation it does not match the "contain" requirement,
> even though the gradient has interpolated from "contain" to "contain". This
> in turn means that the gradient is not a "contain" gradient at any point
> during the interpolation except for the beginning and end.
>
> I'm just not happy for an interpolation component that is the same at the
> beginning and end of the interpolation to violate its specification
> mid-interpolation. That would be something like saying that interpolating
> between rgb(255, 0, 0) and rgb(255, 0, 255) could potentially have rgb(200,
> 27, 128) as a midpoint value.

This problem ("My constraints change in the middle of my animation!")
already exists in transitions.  Try this example:

<!DOCTYPE html>
<style>
div { -webkit-transition: width 1s linear; }
#foo { width: 50%; background: #bada55; }
#bar { width: 50%; background: cornflowerblue;
-webkit-transition-duration: 2s; }
#foo:hover { width: 90%; }
#foo:hover > #bar { width: 10%; }
</style>
<div id=foo><div id=bar>&nbsp</div></div>

You already have to watch the endpoints and adjust yourself if they
implicitly change.  If you just snapshot the used values of the
endpoints at the start of the animation, you'll be very wrong.

~TJ

Received on Friday, 12 August 2011 17:57:36 UTC