I’m building a homepage with an endless scroll. When the scroll reach the bottom of the page, the elements (mainly images) inside the div .js-scroll-container are cloned and the user can continue to scroll down as a loop.

The endless scroll works fine on desktop, the issue is on mobile. The images are flickering/flashing when the elements are cloned and the loop starts again. It makes the scrolling experience not so smooth and creates a kind of lag each time you reach the bottom of the page.

I added to the CSS of the cloned container some properties like backface-visibility: hidden and transform-style: preserve-3d. Unfortunately it doesn’t seem to fix the rendering issue.

The JS:

const container = document.querySelector('.js-scroll')
if (container) {

    const original = container.querySelector('.js-scroll-container')
    const cloned = original.cloneNode(true)
    container.appendChild(cloned)

    const threshold = 0.1

    window.scrollTo(0, threshold)

    window.addEventListener('scroll', () => {
        const halfHeight = original.clientHeight

        if (window.scrollY > halfHeight + threshold) {
            window.scrollTo(0, window.scrollY - halfHeight)
        } else if (window.scrollY < threshold) {
            window.scrollTo(0, halfHeight + window.scrollY)
        }
    })
}

The HTML:

<div class="c-scroll js-scroll">
    <div class="c-scroll__container js-scroll-container">
        <article class="c-scroll__post">
            <figure class="c-scroll__figure">
                <img src="01.jpg" class="c-scroll__image js-scroll-img" width="100%" height="auto" />
            </figure>
        </article>
        <article class="c-scroll__post">
            <figure class="c-scroll__figure">
                <img src="02.jpg" class="c-scroll__image js-scroll-img" width="100%" height="auto" />
            </figure>
        </article>
        <article class="c-scroll__post">
            <figure class="c-scroll__figure">
                <img src="03.jpg" class="c-scroll__image js-scroll-img" width="100%" height="auto" />
            </figure>
        </article>
        <article class="c-scroll__post">
            <figure class="c-scroll__figure">
                <img src="04.jpg" class="c-scroll__image js-scroll-img" width="100%" height="auto" />
            </figure>
        </article>
    </div>
</div>

The CSS:

.c-scroll__container {
    width: 100%;
    min-height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden;
}

Thank you.