CSS анимация мерцание ⇐ Javascript

[Anonymous]

Я, создаю шатер баннеров для моего магазина Shopify, вот код: < /p>

Код: Выделить всё

{% for header_banner in shop.metafields.custom.header_banners.value %}

{% assign banner_url = shop.metafields.custom.header_banner_urls.value[forloop.index0] %}
{% if banner_url %}
[url={{ banner_url }}]
[img]{{ header_banner | image_url }}[/img]
[/url]
{% else %}
[img]{{ header_banner | image_url }}[/img]
{% endif %}

{% endfor %}



.site-header__banners-wrapper {
overflow: hidden;
}
.site-header__banners-wrapper:hover .site-header__banners {
animation-play-state: paused;
}
.site-header__banners {
display: flex;
flex-wrap: nowrap;
animation: animation var(--duration) linear infinite;

}
.site-header__banner {
flex: 0 0 auto;
}
@keyframes animation {
from {
transform: translateX(0);
}
to {
transform: translateX(var(--length))
}
}


document.addEventListener('DOMContentLoaded', () => {
const bannersWrapper = document.querySelector('.site-header__banners-wrapper');
const bannersWrapperWidth = bannersWrapper.offsetWidth;

const banners = document.querySelector('.site-header__banners');

const bannersArray = Array.from(document.querySelectorAll('.site-header__banner'));

let bannersWidth = bannersArray.reduce((bannersWidth, banner) => bannersWidth + banner.offsetWidth, 0);

const duration = bannersWidth / 100;

document.documentElement.style.setProperty('--duration', `${duration}s`);
document.documentElement.style.setProperty('--length', `-${bannersWidth}px`);

let index = 0;

while (bannersWidth < bannersWrapperWidth * 2) {
const cloneBanner = bannersArray[index % bannersArray.length].cloneNode(true);
banners.appendChild(cloneBanner);
bannersWidth += cloneBanner.offsetWidth;
index++;
}
});

Однако у меня есть проблема с iPhone, каждые несколько секунд анимация мигает, как будто целый шатер исчезает в течение крошечной доли времени.
Помогите мне понять причину и исправить.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... flickering