Bug 180435

Summary:

[css-flexbox] flex-basis not animatable

Product:

WebKit

Reporter:

jon.ronnenberg

Component:

CSS

Assignee:

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:

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+

jon.ronnenberg

Reported 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

Attachments
Patch (38.14 KB, patch) 2020-10-19 09:22 PDT, Sergio Villar Senin	no flags	Details Formatted Diff Diff
Patch (47.35 KB, patch) 2020-10-20 01:11 PDT, Sergio Villar Senin	graouts: review+	Details Formatted Diff Diff
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.

jon.ronnenberg

Comment 1 2017-12-05 11:44:19 PST

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

Simon Fraser (smfr)

Comment 2 2017-12-07 15:38:30 PST

Probably needs some new code in CSSPropertyAnimation

Ben Devine

Comment 3 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

Radar WebKit Bug Importer

Comment 4 2020-02-11 14:26:05 PST

<rdar://problem/59363784>

Brook Jordan

Comment 5 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?

Avétis KAZARIAN

Comment 6 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)

Carlos Alberto Lopez Perez

Comment 7 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

Michael Dayah

Comment 8 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.

Brad Bice

Comment 9 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.

Sergio Villar Senin

Comment 10 2020-10-19 09:22:39 PDT

Created attachment 411750 [details] Patch

Sergio Villar Senin

Comment 11 2020-10-20 01:11:07 PDT

Created attachment 411846 [details] Patch

Antoine Quint

Comment 12 2020-10-20 01:25:46 PDT

r=me assuming EWS results are all green.

Sergio Villar Senin

Comment 13 2020-10-21 05:26:53 PDT

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

Philip Jägenstedt

Comment 14 2021-02-02 05:43:05 PST

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

Comment 15 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?

Antoine Quint

Comment 16 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.

Philip Jägenstedt

Comment 17 2021-02-02 14:46:57 PST

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

Note You need to log in before you can comment on or make changes to this bug.