Получение джанк на CSS-трансформации

Question

С помощью следующего CSS я подготавливаю свое сообщение сегмента, чтобы скользить по окну просмотра:

.Segment {
    position: absolute;
    width: 100%;
    overflow: hidden;
    top: -5px;
    top: 0;
    outline: 1px solid orange;
}

.Segment__message {
  display: inline-block;
  margin-top: 15px;
  left: 100%;
  transform: translateX(0);
  position: relative;
  padding-left: 10px;
  will-change: transform;
  font-size: 30px;
}

Если я динамически применяю следующие стили, я получаю очень незначительный рывок:

var message = document.querySelector(".Segment__message");
message.style = "transition: all 20s linear; transform: translateX(calc(-100vw - 100%))"

Это довольно тонко, но гораздо более заметно на 75-дюймовом экране, на котором это будет отображаться.

Использование инструментов Chrome для перфорации, Я вижу некоторое снижение FPS, когда оно падает до 8 FPS в одной точке. Могу ли я что-нибудь сделать, чтобы сгладить это дальше?

https://codepen.io/anon/pen/OrOvdP

Answer 1

В дополнение к использованию translate3d вместо translateX, как указано @sol, я смог улучшить производительность с помощью position: absolute и фиксированной ширины для .Segment__message (плюс фиксированная высота для .Segment).

На моей машине снижение производительности очень незначительно (даже при 6-кратном замедлении ЦП), поэтому было сложно провести точный тест, однако я предполагаю, что, поскольку элемент позиционируется с использованием position: relative; (илиposition: static (в соответствии с примером @ sol), тогда может произойти перерасчет стиля, когда позиция элемента (и смежного элемента DOM - в этом случае псевдоэлемента) смещается в пределах его родительского контейнера.

https://codepen.io/anon/pen/XoZRwr

Answer 2

Я удалил свойство position из .Segment__message и разместил его, используя только transform.

Я также использовал translate3d, что форсирует аппаратное ускорение и улучшало производительность анимации для меня в прошлом.

Я не вижу рывков в Firefox, Chrome или Safari скод ниже.

var link = document.querySelector(".slide");
var message = document.querySelector(".Segment__message");

var styleStr = `transition: all 10s linear; transform: translate3d(-100%, 0, 0)`;

link.onclick = () => {
  message.style = styleStr;
}

.Segment {
  position: absolute;
  width: 100%;
  overflow: hidden;
  top: 0;
  outline: 1px solid orange;
}

.Segment__message {
  display: inline-block;
  margin-top: 15px;
  transform: translate3d(100vw, 0, 0);
  padding-left: 10px;
  will-change: transform;
  font-size: 30px;
}

.Segment__message::after {
  content: "/";
  color: blue;
  display: block;
  float: right;
  padding-left: 15px;
}

.slide {
  display: block;
  margin-top: 50px;
}

<div class="Segment">
  <div class="Segment__message">I am a message</div>
</div>

<a class="slide" href="#">Slide left</a>

Answer 3

Вы можете сделать некоторые улучшения, чтобы убедиться, что ваше сообщение будет нарисовано на новом отдельном слое, например:

.Segment {
    // ...
    perspective: 600px;
    z-index:2;
}
.Segment__message {
    // ...
    z-index:3;
    will-change: transform;
    transform-style: preserve-3d;
    font-size: 30px;
}

Но есть один маленький неприятный трюк, который вы можете сделать вместе с will-changeЭто свойство, если вы примените небольшую задержку (например, 0.1s), ваша анимация будет визуализирована до ее запуска, поэтому должна быть более плавной:

message.style = "transition: all 10s linear .1s; transform: translateX(calc(-100vw - 100%))"

Answer 4

На первый взгляд, это может быть раздел calc () с vw и%.Этот микс иногда вызывал проблемы в моих проектах, потому что вы получаете нецелые числа, которые автоматически округляются браузером.Поэтому я изменил 100% на 100vw в вашем коде.Результатом стала намного более плавная анимация - по крайней мере, в Chrome.