CSS3：自 Safari 13.1 (Mac) 起，flex transition 不再有效

Question

这是适用于所有现代浏览器（以及最新的 safari 浏览器）但不适用于我刚刚在 Mac.

上更新的 v.13.1 的最简单代码

重点是让一个部分在悬停时展开，而其他部分保持同样大。很简单。除了 flex 过渡的动画外，一切都适用于 Safari 13.1（它可以正常扩展）。

在 Safari 13.1 上它是突然的，而在任何其他浏览器上，Chrome/Firefox/older包括 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 问题的最小用例，而不是我的最终脚本，它更复杂并且不能很好地符合宽度过渡（这是轻描淡写的说法).

这就是为什么我需要坚持弹性过渡。

Answer 1

我更改了这个 transition: all 500ms; 它适用于我的 mac 野生动物园。

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>

CSS3：自 Safari 13.1 (Mac) 起，flex transition 不再有效

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

css

safari

flexbox

css-transitions