1

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

.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;}
  @keyframes modelsframe2
  {15%{transform: translate(-47%, -49%) rotate(31deg) scale(1);}
  20%{transform: translate(-50%, -50%) scale(2);}
  95%{transform: translate(-50%, -50%) scale(2);}
  100%{transform: translate(-47%, -49%) rotate(31deg) scale(1);}}
<div class="models">
  <div class="modelsframe"></div>
  <div class="modelsframe2"></div>
 </div>

2 ответа 2

0

Свойство transform еще не до конца поддерживается всеми браузерами прямо из коробки, попробуйте добавить вендорный префикс -webkit:

.modelsframe {
  position: absolute;
  top: 50%; 
  left: 50%;
  -webkit-transform: translate(-47%, -49%) rotate(58deg);
  transform: translate(-47%, -49%) rotate(58deg);
  // ... остальные стили
}
4
  • Спасибо, я работаю через scss. Перфиксы никак не помогут. 18 июл 2020 в 16:13
  • А как SCSS влияет на необходимость их добавления? В Вашем коде не видно что Вы используете mixin'ы или что либо подобное для автоматизации данного процесса
    – Vasily
    18 июл 2020 в 19:15
  • scss автоматом добавляет вебкит перфиксы. Я просто не добавил их для примера. 18 июл 2020 в 22:36
  • SCSS сам по себе самостоятельно ничего не добавляет, есть сторонние библиотеки, такие как Autoprefixer, которые способны это делать
    – Vasily
    18 июл 2020 в 23:46
0

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.