Ошибка перекоса CSS при переходе в Safari (для ПК и мобильных устройств) - PullRequest
Новая
       55

Ошибка перекоса CSS при переходе в Safari (для ПК и мобильных устройств)

1 голос
/ 24 сентября 2019

Проблема видна при анимации свойства skewY () .Похоже, ширина элемента немного уменьшается и больше не касается сторон одинаково широкого контейнера.

Такого не происходит при анимации с помощью skewX () - высота анимируется какожидается.

Я испытываю ошибку только в Safari, как в настольных, так и в мобильных браузерах.Firefox и Chrome работают как положено.Эта проблема видна только во время перехода или анимации.

Предварительный просмотр GIF:

Анимация в Firefox / Chrome

Анимация в Safari 

.arrow {
  position: absolute;
  top: 20px;
  left: 20px;
  bottom: 20px;
  right: 20px;
  background-color: rgb(230, 230, 230);
}

.rect-x {
  position: absolute;
  left: calc(50vw - 50px);
  top: 0;
  width: 100px;
  height: 100%;
  background-color: blue;
  animation: skew-x 1s linear alternate infinite;
  transform-origin: center;
}

.rect-y {
  position: absolute;
  left: 0;
  top: calc(50vh - 50px);
  width: 100%;
  height: 100px;
  background-color: red;
  animation: skew-y 1s linear alternate infinite;
  transform-origin: center;
}

@keyframes skew-x {
  0% { transform: skewX(15deg) skewY(0); }
  to { transform: skewX(-15deg) skewY(-0);}
}

@keyframes skew-y {
  0% { transform: skewX(0) skewY(15deg); }
  to { transform: skewX(0) skewY(-15deg); }
}
<div class="arrow">
  <div class="rect-y"></div>
  <div class="rect-x"></div>
</div>

1 Ответ

0 голосов
/ 24 сентября 2019

Попробуйте использовать префикс браузера. 

.arrow {
  position: absolute;
  top: 20px;
  left: 20px;
  bottom: 20px;
  right: 20px;
  background-color: rgb(230, 230, 230);
}

.rect-x {
  position: absolute;
  left: calc(50vw - 50px);
  top: 0;
  width: 100px;
  height: 100%;
  background-color: blue;
  animation: skew-x 1s linear alternate infinite;
  -webkit-animation: skew-x 1s linear alternate infinite;
  transform-origin: center;
  -webkit-transform-origin: center;
}

.rect-y {
  position: absolute;
  left: 0;
  top: calc(50vh - 50px);
  width: 100%;
  height: 100px;
  background-color: red;
  animation: skew-y 1s linear alternate infinite;
  -webkit-animation: skew-y 1s linear alternate infinite;
  transform-origin: center;
  -webkit-transform-origin: center; 
}

@keyframes skew-x {
  0% { transform: skewX(15deg) skewY(0); }
  to { transform: skewX(-15deg) skewY(-0);}
}

@-webkit-keyframes skew-x {
  0% { -webkit-transform: skewX(15deg) skewY(0); }
  to { -webkit-transform: skewX(-15deg) skewY(-0);}
}

@keyframes skew-y {
  0% { transform: skewX(0) skewY(15deg); }
  to { transform: skewX(0) skewY(-15deg); }
}

@-webkit-keyframes skew-y {
  0% { -webkit-transform: skewX(0) skewY(15deg); }
  to { -webkit-transform: skewX(0) skewY(-15deg); }
}
<div class="arrow">
  <div class="rect-y"></div>
  <div class="rect-x"></div>
</div>
...