Очень медленно прогружается анимация в Яндекс браузере, как исправить?

Question

[Дмитрий]

https://aerosolparts.ru/

Есть такой сайт, на первом экране, очень медленно увелечивается полоска снизу слайдера, проблема скорее всего заключается в том что сайт медленно загружается.

Анимация осуществляется через добовления класса, ( на jQuery ).
Есть ли возможность завысить приоритет этой анимации, или запустить её в отдельный поток.
Нужно чтобы линии расширялись плавнно.

Comments

[twobomb]

Используй оперу, там всё ок

[Дмитрий]

twobomb, Что не совет, то золото, не понимаю как я раньше не додумался, аж забыл что яндекс браузер никто не использует, и что через него 100% никто не зайдёт и не увидет эту нечёткую анимацию)

Спасибо!

[twobomb]

Дмитрий, Пускай страдают или устанавливают нормальный браузер. Сидят там на своих яндекс амиго браузерах установленных из-за того что галочку забыли снять, а под них еще подстраивайся

Answer 1

[Sanes]

Поменять компьютер на более мощный.

Comments

[Дмитрий]

Как я не догодался..., спасибо большое!!!

Answer 2

[Роман]

Рывки анимации наблюдаются и в Firefox и в Chrome.

Lighthouse говорит:

Некомбинированные анимации могут пропускать кадры и увеличивать совокупное смещение макета.

А в этой статье говорится:

Анимация, выполняемая за пределами этапа компоновки, может выглядеть «рваной» (т. е. не быть плавной) на медленных телефонах или во время выполнения ресурсоемких задач в основном потоке. Дергающиеся анимации могут увеличивать показатель Cumulative Layout Shift (совокупное смещение макета, CLS) вашей страницы. Снижение CLS помогает улучшить оценку производительности в Lighthouse.

Если перевести на человечий, то - переделывайте стили анимации, так чтобы она не использовала свойства вызывающие перерисовку, т.е. никаких width.

ЗЫ. Если пройти дальше, по ссылкам, то можно получить более развернутый ответ.

Набросал код

.home-slider__carousel.animate {
  display: block;
  padding-bottom: 82px;
  position: relative;
}

.animate__body {
  width: calc(100% - 1px);
  display: flex;
  align-items: start;
  transform: skew(-35deg);
  position: relative;
  height: 26px;
  overflow: hidden;

}

.animate__body::before,
.animate__body::after {
  content: '';
  height: 100%;
  width: 50%;
  flex: 1 1;
  position: absolute;
  top: 0;
  left: 0;
}

.animate__body::before {
  background: #0d0087;
  animation: anima1 3s linear forwards infinite;
  z-index: 1;
}

.animate__body::after {
  background: #e34126;
  height: 65.39%;
  animation: anima2 3s linear forwards infinite;
}

@keyframes anima1 {
  0% {
    transform: translateX(-100%);
  }

  33.33% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes anima2 {
  0% {
    transform: translateX(-100%);
  }

  33.33% {
    transform: translateX(0);
  }

  66.66% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(100%);
  }
}