Bug 180435

Summary: [css-flexbox] flex-basis not animatable
Product: WebKit Reporter: jon.ronnenberg
Component: CSSAssignee: Sergio Villar Senin <svillar>
Status: RESOLVED FIXED    
Severity: Normal CC: avetis.k, benjamin.devine, bradbice, brkjrdn, clopez, darin, dino, graouts, graouts, jonlee, kyle.bavender, m.goleb+bugzilla, michael, m.kurz+webkitbugs, philip, simon.fraser, svillar, webkit-bug-importer, zalan
Priority: P2 Keywords: GoodFirstBug, InRadar, WebExposed
Version: Safari 11   
Hardware: Mac   
OS: OS X 10.11   
See Also: https://bugs.webkit.org/show_bug.cgi?id=209872
https://bugs.webkit.org/show_bug.cgi?id=209874
https://bugs.webkit.org/show_bug.cgi?id=209876
Attachments:
Description Flags
Patch
none
Patch graouts: review+

Description jon.ronnenberg 2017-12-05 11:35:18 PST
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
Comment 1 jon.ronnenberg 2017-12-05 11:44:19 PST
Correct link to standard specification:
https://www.w3.org/TR/css-flexbox-1/#flex-basis-property
Comment 2 Simon Fraser (smfr) 2017-12-07 15:38:30 PST
Probably needs some new code in CSSPropertyAnimation
Comment 3 Ben Devine 2020-02-11 08:53:04 PST
This can still be reproduced as of MacOS Safari 13.0.3, it would be great to see it fixed
Comment 4 Radar WebKit Bug Importer 2020-02-11 14:26:05 PST
<rdar://problem/59363784>
Comment 5 Brook Jordan 2020-02-17 19:52:45 PST
It doesn’t fire the ontransitionend event either.
It doesn’t even know it’s supposed to transition?
Comment 6 Avétis KAZARIAN 2020-03-21 12:21:59 PDT
(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)
Comment 7 Carlos Alberto Lopez Perez 2020-04-01 13:08:31 PDT
This its tested by WPT tests: css/css-flexbox/animation/flex-basis-composition.html and css/css-flexbox/animation/flex-basis-interpolation.html
Comment 8 Michael Dayah 2020-06-23 15:32:32 PDT
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.
Comment 9 Brad Bice 2020-10-07 20:18:48 PDT
The above comment is true, however this leads to potential performance problems when flex-basis is all that needs to be transitioned.
Comment 10 Sergio Villar Senin 2020-10-19 09:22:39 PDT
Created attachment 411750 [details]
Patch
Comment 11 Sergio Villar Senin 2020-10-20 01:11:07 PDT
Created attachment 411846 [details]
Patch
Comment 12 Antoine Quint 2020-10-20 01:25:46 PDT
r=me assuming EWS results are all green.
Comment 13 Sergio Villar Senin 2020-10-21 05:26:53 PDT
Committed r268792: <https://trac.webkit.org/changeset/268792>
Comment 15 Sergio Villar Senin 2021-02-02 08:05:04 PST
(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?
Comment 16 Antoine Quint 2021-02-02 09:23:45 PST
(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.
Comment 17 Philip Jägenstedt 2021-02-02 14:46:57 PST
I see, so those remaining test failures should be ascribed to bug 189299 then I assume.