具有动态最大高度的CSS转换在IOS的Chrome上不起作用（在ReactJS项目中）

Question

考虑一个React组件。

有一个具有以下CSS样式的DIV：

.bracketRow
  display: flex
  flex-direction: row
  -webkit-transition: all 1s
  -moz-transition: all 1s
  -ms-transition: all 1s
  -o-transition: all 1s
  transition: all 1s
  max-height: 400px

DIV看起来像这样：

<div className="bracketRow" style={{ maxHeight: `${getBracketRowHeight()}px`}}>

如您所见，最大高度是动态的，并且会发生变化。这在任何桌面浏览器中都有效。在IOS中，它可以在Safari中使用，但不能在Chrome中。在Chrome for IOS（IOS 13，Chrome 80）中，没有动画，最大高度直接从一个值变为新值。

它们的关键是内联样式功能，如果我在其他地方更改最大高度，则动画在Chrome for IOS中效果很好。仅当我从函数动态获取最大高度值时，它才起作用。

非常感谢您的社区。

Answer 1

Mistery解决了。

CSS起作用。原因是函数在参数中具有状态。由于在IOS上滚动，该状态的变化超出了应有的水平。仅在IOS中，当div更改其最大高度时，滚动会加速，因此它的行为更加奇怪且难以预测。