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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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