Transition flex-basis in Safari, Webkit

As of version 14.0 of Safari on macOS, and release 114 of Safari Technology Preview, webkit can not transition the flex-basis attribute alone, when applied to the transform property.

1
2
/* this does not work in Webkit! */
transition: flex-basis 0.3s ease;

This works fine in Chromium and Mozilla-based browsers.

To get this working in Webkit, you’ll currently have to use the all value.

1
2
/* this works in Webkit */
transition: all 0.3s ease;

However, this can be potentially performance heavy, as all properties are being transitioned.

Webkit Bugzilla bug