I've been developing a complicated infinite 2D layout with animations in JS+CSS. I could manage to make everything work except that in iPhone the images flash when scrolling around the layout (I haven't tried in other iOS yet).

I believe the problem has to do with altering the scroll of the container inside a scroll event listener like this:

let main = document.getElementById('container');

main.addEventListener("scroll", event => {

    let viewportWidth = document.documentElement.clientWidth + 1;
    let viewportHeight = document.documentElement.clientHeight + 1;
    main.scrollLeft = checkLimits(main.scrollLeft, 0, 3500 - viewportWidth);
    main.scrollTop = checkLimits(main.scrollTop, 0, 2800 - viewportHeight);
    
});

I have isolated the problem, check out the complete code here.

I have done many tests: isolating main.scrollTop and main.scrollLeft, placing them in a setInterval/requestAnimationFrame instead of and event listener, even desperate tests like using "touchend" event instead of "scroll")... but I couldn't get rid of the flashing, that I would say it starts as soon as the first statement main.scrollLeft = or main.scrollTop = is executed.

Is this an unavoidable bug? Please help!