CSS текстовый бегунок дергается при повторении текста только на iOS

Question

Я работаю с CSS-маркировкой на основе отличного урока Кевина Пауэла https://www.youtube.com/watch?v=iLmBy-HKIAw

Она хорошо работает в Chrome на десктопе и на Android.
Но при тестировании в Chrome на iOS на iPhone текст прокручивается, но дергается / мигает при повторении.

Есть ли какие-либо идеи, как это исправить?
Я пробовал и другие текстовые маркировки, и они также, похоже, дергаются/пропускаются только на iOS.

Существует ли какой-либо специальный код, который нужно добавить, чтобы помочь iOS справиться с прокруткой и сделать маркировку более плавной без рывков?

Спасибо

    <style>
        .scroller {
  max-width: 100%;
}

.scroller__inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
  --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
  --_animation-duration: 60s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

/* общие стили */

body {
  display: grid;
  min-block-size: 100vh;
  place-content: center;
  font-family: system-ui;
  font-size: 1.125rem;
  background-color: var(--clr-primary-800);
}

.tag-list {
  margin: 0;
  padding-inline: 0;
  list-style: none;
}

.tag-list li {
  padding: 0px;
  border-radius: 0rem;
}

    </style>

<div class="scroller" data-speed="fast">
    <ul class="tag-list scroller__inner">
      <li>100% этого текста будет прокручиваться, а затем он снова повторится после этого &#8226;</li>
      <li>100% этого текста будет прокручиваться, а затем он снова повторится после этого &#8226;</li>
    </ul>
  </div>

  <script>
    const scrollers = document.querySelectorAll(".scroller");

// Если пользователь не выбрал режим с уменьшенной анимацией, добавляем анимацию
if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
  addAnimation();
}

function addAnimation() {
  scrollers.forEach((scroller) => {
    // добавляем data-animated="true" ко всем `.scroller` на странице
    scroller.setAttribute("data-animated", true);

    // Создаем массив из элементов внутри `.scroller-inner`
    const scrollerInner = scroller.querySelector(".scroller__inner");
    const scrollerContent = Array.from(scrollerInner.children);

    // Для каждого элемента в массиве клонируем его
    // добавляем aria-hidden
    // добавляем его в `.scroller-inner`
    scrollerContent.forEach((item) => {
      const duplicatedItem = item.cloneNode(true);
      duplicatedItem.setAttribute("aria-hidden", true);
      scrollerInner.appendChild(duplicatedItem);
    });
  });
}

  </script>

</div>

Ответ или решение

Проблема со стукающимися и мерцающими текстовыми маркерами на iOS может быть связана с рядом факторов, включая особенности работы браузеров на данной платформе и способы, которыми они обрабатывают анимацию. Вот несколько шагов и рекомендаций, которые могут помочь вам устранить данную проблему:

1. Оптимизация анимации

Измените свойство animation в CSS, чтобы использовать will-change, что подсказывает браузеру заранее, какие свойства будут изменяться. Это может помочь улучшить производительность анимации:

.scroller[data-animated="true"] .scroller__inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
  will-change: transform; /* Добавлено */
}

2. Убедитесь в правильной настройке ключевых кадров

Иногда проблема может быть вызвана тем, как настроены ключевые кадры анимации. Попробуйте изменить ваш translate в @keyframes:

@keyframes scroll {
  from {
    transform: translateX(0); /* Измените на от 0 */
  }
  to {
    transform: translateX(calc(-100% - 0.5rem)); /* Изменено для более плавного перехода */
  }
}

3. Примените условие для плавности

Для iOS можно также использовать свойство CSS transform с более детализированным расчетом анимации:

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

4. Перепроверка использования `translate`

Иногда iOS может неправильно обрабатывать calc(-50%), особенно если иные компоненты маркера имеют фиксированную ширину. Убедитесь, что у вас нет конфликтов:

to {
  transform: translateX(-100%); /* Убедитесь, что это согласуется с вашими базовыми стилями */
}

5. Убедитесь, что нет конфликтующих стилей

Иногда другие стили могут влиять на анимацию. Убедитесь, что никакие другие классы или селекторы не перекрывают ваши стили анимации.

6. Использование JavaScript для более точного контроля

Если CSS-анимация по-прежнему существует, вы можете использовать JavaScript для плавного управления анимацией:

function addAnimation() {
  scrollers.forEach((scroller) => {
    scroller.setAttribute("data-animated", true);
    const scrollerInner = scroller.querySelector(".scroller__inner");
    const scrollerContent = Array.from(scrollerInner.children);
    scrollerInner.style.animationDuration = "40s"; // или любое другое значение по вашему выбору

    scrollerContent.forEach((item) => {
      const duplicatedItem = item.cloneNode(true);
      duplicatedItem.setAttribute("aria-hidden", true);
      scrollerInner.appendChild(duplicatedItem);
    });
  });
}

7. Применение `translateZ(0)`

В некоторых случаях, добавление translateZ(0) может помочь в активации аппаратного ускорения, что сделает анимацию более плавной:

.scroller[data-animated="true"] .scroller__inner {
  transform: translateZ(0); /* Добавлено для улучшения производительности */
}

Заключение

Проблемы с анимацией в iOS часто возникают из-за его уникального подхода к рендерингу и анимации. Попробуйте внести перечисленные изменения в вашу текущую реализацию текстового маркера. Если все рекомендации не решат проблему, возможно, стоит рассмотреть использование альтернативных решений для реализации текста-скроллера (например, библиотеки JavaScript), которые могут предоставить более гладкий пользовательский интерфейс на всех устройствах.