Bug 180435 – [css-flexbox] flex-basis not animatable

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

According to specification as well as parity with at least Firefox and Chrome, flex-basis must be animatable.
https://drafts.csswg.org/css-flexbox-1/#propdef-flex-basis

This doesn't work in Safari 11.0.1 and below.

Steps to reproduce:

https://github.com/DrummerHead/safari-flex-basis-animation-bug

https://codepen.io/thomas-eilermann/pen/grjEjE

https://codepen.io/anon/pen/rrqaQL


Also mentioned here:

https://github.com/philipwalton/flexbugs/issues/176

Correct link to standard specification:
https://www.w3.org/TR/css-flexbox-1/#flex-basis-property

[Simon Fraser (smfr)]

Probably needs some new code in CSSPropertyAnimation

[Ben Devine]

This can still be reproduced as of MacOS Safari 13.0.3, it would be great to see it fixed

[Radar WebKit Bug Importer]

<rdar://problem/59363784>

[Brook Jordan]

It doesn’t fire the ontransitionend event either.
It doesn’t even know it’s supposed to transition?

[Avétis KAZARIAN]

(In reply to Ben Devine from comment #3)
> This can still be reproduced as of MacOS Safari 13.0.3, it would be great to
> see it fixed

I confirm.

OS: 10.15.3 (19D76)
Safari: 13.0.5 (15608.5.11)
Safari Preview: Release 102 (Safari 13.2, WebKit 15610.1.5.2)

[Carlos Alberto Lopez Perez]

This its tested by WPT tests: css/css-flexbox/animation/flex-basis-composition.html and css/css-flexbox/animation/flex-basis-interpolation.html

[Michael Dayah]

It appears flex-basis can be transitioned if the transition property set is "all" instead of "flex-basis" or even "flex" and the duration is specified in milliseconds instead of seconds. What property "all" is catching is a mystery.

[Brad Bice]

The above comment is true, however this leads to potential performance problems when flex-basis is all that needs to be transitioned.

[Sergio Villar Senin]

Created attachment 411750 [details]
Patch

[Sergio Villar Senin]

Created attachment 411846 [details]
Patch

[Antoine Quint]

r=me assuming EWS results are all green.

[Sergio Villar Senin]

Committed r268792: <https://trac.webkit.org/changeset/268792>

[Philip Jägenstedt]

I wonder if there's more that needs fixing here, as I see some of the tests are still failing in STP 119:
https://wpt.fyi/results/css/css-flexbox/animation/flex-basis-composition.html?run_id=5756059782217728&run_id=5710069272412160&run_id=4895145164013568&run_id=5677840106258432
https://wpt.fyi/results/css/css-flexbox/animation/flex-basis-interpolation.html?run_id=5756059782217728&run_id=5710069272412160&run_id=4895145164013568&run_id=5677840106258432

[Sergio Villar Senin]

(In reply to Philip Jägenstedt from comment #14)
> I wonder if there's more that needs fixing here, as I see some of the tests
> are still failing in STP 119:
> https://wpt.fyi/results/css/css-flexbox/animation/flex-basis-composition.
> html?run_id=5756059782217728&run_id=5710069272412160&run_id=4895145164013568&
> run_id=5677840106258432
> https://wpt.fyi/results/css/css-flexbox/animation/flex-basis-interpolation.
> html?run_id=5756059782217728&run_id=5710069272412160&run_id=4895145164013568&
> run_id=5677840106258432

Yeah, basically animation composition is still not supported in WebKit AFAIK, Antoine?

[Antoine Quint]

(In reply to Sergio Villar Senin from comment #15)
> (In reply to Philip Jägenstedt from comment #14)
> > I wonder if there's more that needs fixing here, as I see some of the tests
> > are still failing in STP 119:
> > https://wpt.fyi/results/css/css-flexbox/animation/flex-basis-composition.
> > html?run_id=5756059782217728&run_id=5710069272412160&run_id=4895145164013568&
> > run_id=5677840106258432
> > https://wpt.fyi/results/css/css-flexbox/animation/flex-basis-interpolation.
> > html?run_id=5756059782217728&run_id=5710069272412160&run_id=4895145164013568&
> > run_id=5677840106258432
> 
> Yeah, basically animation composition is still not supported in WebKit
> AFAIK, Antoine?

Correct. The issues in those tests aren't specific to this property but are systemic. I hope to address them but won't be able to for a while still.

[Philip Jägenstedt]

I see, so those remaining test failures should be ascribed to bug 189299 then I assume.