He estado desarrollando un diseño 2D infinito complicado con animaciones en JS+CSS. Pude hacer que todo funcionara, excepto que en iPhone las imágenes parpadean cuando se desplaza por el diseño (no lo he intentado en otros iOS todavía).
Creo que el problema tiene que ver con alterar el desplazamiento del contenedor dentro de un detector de eventos de desplazamiento como este:
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); });He aislado el problema, mira el código completo aquí .
He hecho muchas pruebas: aislando main.scrollTop y main.scrollLeft , colocándolos en un setInterval / requestAnimationFrame en lugar de un detector de eventos, incluso pruebas desesperadas como usar el evento "touchend" en lugar de "scroll" )... pero no pude No elimine el parpadeo, diría que comienza tan pronto como se ejecuta la primera declaración main.scrollLeft = o main.scrollTop = .
¿Es este un error inevitable? ¡Por favor ayuda!