CSS3：自Safari 13.1（Mac）起，Flex过渡不再起作用

Question

这是在所有现代浏览器（以及最近的野生动物园浏览器）上均可使用的最简单的代码，但不适用于我刚刚在Mac上更新的v.13.1。

关键是使一个部分在悬停时展开，而其他部分保持相同大小。很简单。除了flex过渡的动画之外，其他所有内容都可以在Safari 13.1上运行（可以正常扩展）。

在Safari 13.1上，它突然出现，而在其他任何浏览器上，包括Chrome / Firefox /旧版Safari，过渡都很顺利。

请问是否有任何修复或解决方法（基于flex）？

谢谢。

section {
  height: 200px;
}

.list {
  display: flex;
}

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

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

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

附加说明：我知道用（最小）宽度过渡来替代flex过渡是可行的，但它却隐含了一些不希望有的副作用，因为当边框和填充物起作用时，它会很快变得复杂，尤其是在网站响应迅速时，截面的数量是动态的，因此需要精确到像素。在这方面，Flex非常直截了当，因为一切都由设计来照顾。我通过数周的测试其他所有解决方案并在出现阻塞问题时将它们逐一排除，从而了解了这一困难的方法。在上面的示例中，宽度转换可以无缝地工作，但这只是展示flex问题的最小用例，而不是我的最终脚本，该脚本更加复杂并且与宽度转换的兼容性不佳（这是一种轻描淡写的说法） ）。

这就是为什么我需要坚持弹性转换的原因。

Answer 1

我更改了此transition: all 500ms;，它适用于我的Mac Safari。

section {
  height: 200px;
}

.list {
  display: flex;
}

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

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

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