Как сделать правильную анимацию изменения размера в Safari?

Question

[MeMoJlor]

Есть два блока, они анимированы на увеличение. В Chrome, Firefox работает нормально, на на Safari блоки съезжают вниз и направо. Ощущение, как будто transform-orign: top left. Пробовал анимировать width, scale, ничего не помогает.
Перфиксы так же не помогают.

<div class="models">
   <div class="modelsframe"></div>
   <div class="modelsframe2"></div>
 </div>

.models
  {height: 700px; width: 700px;
  background-color: #1c1c1c;
  position: relative;
  overflow: hidden;}
.modelsframe
  {position: absolute;
  top: 50%; left: 50%;
  transform: translate(-47%, -49%) rotate(58deg);
  width: 200px; height: 300px;
  border: 1px solid white;
  border-radius: 20px;
  background-color: rgb(75, 75, 75);
  animation: modelsframe 27s;
  animation-delay: 1.5s;
  animation-iteration-count: infinite;
  transform-origin: center;}
  @keyframes modelsframe
  {15%{transform: translate(-47%, -49%) rotate(58deg);
    width: 200px; height: 300px;
    background-color: rgb(75, 75, 75);}
  20%{transform: translate(-50%, -50%);
    width: 500px; height: 650px;
    background-color: rgb(59, 62, 92);}
  50%{background-color: rgb(59, 62, 92);}
  55%{background-color: rgb(88, 88, 88);}
  90%{transform: translate(-50%, -50%);
    width: 500px; height: 650px;}
  98%{transform: translate(-47%, -49%) rotate(58deg);
    width: 200px; height: 300px;}}
.modelsframe2
  {position: absolute;
  top: 50%; left: 50%;
  transform: translate(-47%, -49%) rotate(31deg);
  width: 500px; height: 400px;
  border: 1px solid white;
  border-radius: 150px;
  animation: modelsframe2 27s;
  animation-delay: 1.5s;
  animation-iteration-count: infinite;
  transform-origin: center;}

Comments

[ArtJH]

можно адрес сайта

Answer 1

[RAX7]

Поменяй процентные значения в transform: translate(-47%, -49%) на значения в пикселях, похоже что safari не пересчитывает проценты при изменении width/height

Comments

[MeMoJlor]

Спасибо