CSS3 анимация трансформации прыжков на OSX Chrome - PullRequest
Новая
       59

CSS3 анимация трансформации прыжков на OSX Chrome

0 голосов
/ 05 июня 2018

У меня проблема с Chrome (v. 67) в OSX и анимации движения.Я подготовил для этого скрипку JS: https://jsfiddle.net/5m173ghv/31/

Если вы откроете ее в Safari, она будет работать очень хорошо.Но когда вы будете использовать хром, у него будут небольшие лаги при движении.

Я не могу описать это немного подробнее ... Вам нужно открыть его и попробовать себя на большом экране ... Пожалуйста, внимательно посмотрите на белую коробку.Вы увидите, что в этом окне иногда есть лаги или небольшие прыжки (?) ...

Это очень странно.Я попробовал почти каждый ответ из Интернета (поверьте мне;)).

Я также попробовал:

  • Изменить преобразования при анимации в положение (слева)
  • Изменение анимации на переходы
  • добавление дополнительных параметров (видимость задней стороны, перспектива, изменение воли ...)
  • Изменение последовательности анимации для увеличения количества шагов (на 10%)
  • Отладка на инструментах Chrome Dev (~ 30-40fps)
  • Добавление преобразований, таких как translateZ (0)

Вы думаете, что это ошибка Chrome или, возможно, моя ошибка?У вас есть какое-нибудь решение для этого?

Здесь у вас есть код:

HTML 

<span class="spark"></div>

SCSS 

body {
    background-color: black;
}

@keyframes left-to-right {
    0% {
      transform: translate3d(0,0,0);
    }

    100% {
        transform: translate3d(50vw,0,0);
    }
}

.spark {
    position: absolute;
    top: 30px;
    width: 322px;
    height: 500px;
    background-color: white;
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    perspective: 1000px;
    animation: left-to-right 5s infinite linear;
    will-change: transform;
    pointer-events: none;
    user-select: none;
}
...