Как я могу исправить переход IOS для ширины, высоты и преобразования?

Question

В ios (safari и chrome), если я изменю размер элемента (ширину, высоту), а также поверну его, переход всех этих свойств не будет работать должным образом.

Я пытался использовать масштабирование, и это решает проблему, но использование масштабирования влияет на размер дочерних элементов, поэтому это не оптимальное решение.

transform: translate3d(-50%, -50%, 0) rotate(-13deg) scale(1);
transform-origin: center;
transition: all .3s ease-out;

Это неправильное поведение: https://imgur.com/a/K6KOXSj Здесь у меня есть ручка с кодом: https://codepen.io/alexcondur/pen/pBjOWM?editors=0100

Answer 1

Наконец, после того, как обернул голову в течение 2 дней, я нашел решение.

Идея состоит в том, чтобы центрировать элемент, не используя translate3d(-50%, -50%, 0);
и сохраняя только преобразование rotate. Итак, я использую flex (думаю, что grid тоже подойдет)

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.child {
  transform: rotate(14deg);
}

https://codepen.io/alexcondur/pen/ROaVMe

Если родительский элемент элемента будет меньше дочерних, я бы использовал margin для позиционирования моего дочернего элемента по центру. Например:

.parent {
  width: 100px;
  height: 100px;
}

.child {
  width: 200px;
  height: 350px;
  margin: -175px 0 0 -100px;
  transform: rotate(14deg);
}

Answer 2

Попробуйте добавить это возможно:

transform-origin: center center;  /* center twice */
transform-box: fill-box;