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

[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 %}



{% else %}

{% 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))
}
}


const bannersWrapper = document.querySelector('.site-header__banners-wrapper');
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);
let index = 0;

const duration = bannersWidth / 100;

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

const bannersWrapperWidth = bannersWrapper.offsetWidth;

function cloneBanners() {
if (bannersWidth > bannersWrapperWidth * 2) return;

const cloneBanner = bannersArray[index % bannersArray.length].cloneNode(true);
banners.appendChild(cloneBanner);
bannersWidth += cloneBanner.offsetWidth;
index++;

requestAnimationFrame(cloneBanners);
}

document.addEventListener('DOMContentLoaded', () => {
requestAnimationFrame(cloneBanners);
});

< /code>
Однако у меня есть проблема с iPhone, каждые несколько секунд анимация мигает, как целый шатер исчезает в течение крошечной доли времени. < /p>
Пожалуйста, помогите мне понять причину и исправить его. requestAnimationFrame (), это помогло, чтобы сайт застрял, но, к сожалению, он не решил первоначальную проблему.>

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