In this example, the width of the div animates from 100px to 1000px, at the same time as the background animates from linear-gradient(left, red 50%, white 100px, blue 100%) to linear-gradient(left, red 10%, white 100px, blue 100%) (note that only the position of the first stop changes).

The first box shows the effects of "early fixup" (what the spec currently mandates), while the second shows "late fixup", where color-stops that are mis-ordered aren't fixed until just before they're displayed. The third box (added by Leif Arne Storset) shows interpolation of specified values rendered using the UA's default color-stop fixup algorithm.

The slider moves the transition from 0% to 100% completed.

Since both gradients specify the white color-stop at 100px, the white should always either be at 100px, or be at the same position as the red color-stop (if the red is at a position further than 100px). In the early-resolution gradient, though, the white stop ends up jumping "ahead" of the red stop (a full 20px ahead when the transition's at 50%).