Re: [css-background] Animating border-position

On Wed, Nov 27, 2013 at 10:47 AM, Alan Stearns <stearns@adobe.com> wrote:
> Hey all,
>
> I brought up the issue of animating <position> last week, and Tab noted
> that background-position is defined incorrectly [1]. Testing interop shows
> differences in how background-position animates as well [2, point 2].
>
> The problem is that by default, transitions occur over computed values.
> The computed value for background-position include keywords, and there is
> no interpolation between keywords defined.
>
> This could be fixed by defining the computed value of background-position
> to be a list, with each item in the list containing two values of length,
> percentage or calc). This appears to be what Gecko does. But I’m not sure
> it’s useful to have a value of ‘right 10px’ be converted to ‘calc(100% -
> 10px)’ in the computed value. And Fantasai raised the concern of future
> extensions to <position> that might not be reducible to calc() expressions.
>
> If we should leave the computed value definition as it is, then we’ll need
> to specify some keyword interpolation.
>
> An interim fix would add a definition that allows interpolation between
> identical keywords - so that ‘left top 50px’ could interpolate with ‘left
> top 100px’. This is what browsers appear to interopably implement. This
> would not define animating from ‘left top 50px’ to ‘right top 100px’ -
> which is something Blink does not do currently, but Gecko and IE11 appear
> to handle.
>
> A full fix would define current <position> keyword interpolation for all
> combinations.

Investigating what FF actually does, it's rather clever.

A "right <percentage>" is exactly equivalent to "left calc(100% -
<percentage>)", which is easy.

A "right <length>" is, cleverly, exactly equivalent to "left calc(100%
- <length>)", if you act as FF does for bg-position, and handle the
percentage half and the pixel half of the calc() separately.

I believe Chrome resolves the percentage into a <length>, which the
spec actually requires, and makes this not actually possible to
resolve.

We've been over this before, I think, and haven't resolved on whether
to change the spec for calc() or not, to allow <percentage>+<foo> as a
top-level type accepted by some properties.

~TJ

Received on Monday, 2 December 2013 21:53:13 UTC