CSS -Преобразование с помощью динамического c Макс. Высота не работает на Chrome для IOS (в проекте ReactJS)

Question

Рассмотрим компонент React.

Существует DIV со следующим CSS стилем:

.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`}}>

Как видите, максимальная высота равна Dynami c, и она изменяется. Это прекрасно работает в любом браузере. В IOS это работает в Safari, но не в Chrome. В Chrome для IOS (IOS 13, Chrome 80) анимация отсутствует, максимальная высота напрямую переходит от одного значения к новому.

Ключом здесь является встроенная функция стиля, если я изменю максимальную высоту в другом месте, анимация прекрасно работает в Chrome для IOS. Это не сработает, только если я получу значение max-height из функции динамически.

Большое спасибо сообществу.

Answer 1

Тайна решена.

Работает CSS. Причина в том, что функция имеет состояние в параметрах. Это состояние меняется больше, чем должно из-за прокрутки на IOS. Только в IOS, когда div изменяет свою максимальную высоту, прокрутка ускоряется, поэтому она ведет себя странно и трудно предсказуемо.