CSS3: flex transition doesn't work anymore at least since Safari 13.1 (Mac)

Here is the simplest code that works on every modern browser (and also on very recent safari browsers) but not on the v.13.1 that I just updated on my Mac.
Unfortunately I can't tell which version of Safari I had just before but I updated it no more than 4 months ago, max. So it was a pretty recent one.
The point is to get a section to expand when hovering it while the other sections remain equally large. Simple enough.

Everything works on Safari 13.1 (it expands alright) except the animation of the flex transition.

On Safari 13.1 it is abrupt while on any other browser, Chrome/Firefox/older Safari included, the transition is smooth.

Any fix or workaround (based on flex) please?


Here is the CSS:

section{
  height: 200px;
}

.list{
  display: flex;
}

.color{
  display: flex;
  flex: 1 1 10em;
  overflow: hidden;
  transition: flex 500ms;
}

color:hover{
  flex: 1 1 40em; 
}

Here is the HTML:


<div class="list">

  <section class="color" style="background: red"></section>

  <section class="color" style="background: blue"></section>

  <section class="color" style="background: green"></section>

  <section class="color" style="background: yellow"></section>

  <section class="color" style="background: orange"></section>

</div>



And here is a jsFiddle in order to see the code working live and edit it at your will:

https://jsfiddle.net/64qpvhuo/1/
This code will run smoothly anywhere except on the very latest version(s). of Safari.
Note: I know that replacing flex transition with (min-)width transitions works but it implies some undesired side effects as it becomes complex very quickly when borders and paddings come into play, especially when the website is responsive, the amount of sections is dynamic and one needs a precision to the pixel. Flex is very straight forward in that regard as everything is taken care of by design. I learned it the hard way by testing every other solution for weeks and ruling them out one by one when blocking issues appeared along the way.

That's why I need to stick with the flex transition.
With the example here above, width transitions would work seemlessly but this is just the minimal use case to show the flex issue, not my final script that is way more complex and which doesn't comply with width transitions very well (and that's an understatement).

Thank you.
PS: I'm running MacOS Mojave 10.14.6 on an iMac Pro.

Replies

For those who are interested:
I managed to get it to work with the help of someone in Stack overflow and here is the answer:

Keep everything as is but just change "transition : flex 500ms" to " transition all 500ms" and it will be fine.
One more thing though, if you use seconds like "0.5s" instead of milliseconds like "500ms" it will not work neither even tough it worked before. It has to be "all" instead of "flex" and "ms" instead of "s".
Hope it brought something to the community even though it's very specific.