Estoy tratando de resolver algunos problemas de comportamiento en dispositivos móviles (iOS 14.8.1) con elementos deslizantes de imágenes de productos en un tema de Shopify Dawn 2.0 (como un carrusel, el tema lo llama "control deslizante") que tiene un botón, como se muestra a continuación:

que cuando se hace clic para desplazarse, se desplaza en la cantidad incorrecta, lo que hace que el borde de la siguiente imagen quede fuera de la vista. p.ej

Al deslizar el control deslizante (magia interna del sistema operativo), se detiene en el lugar correcto, son solo estos botones de elementos deslizantes los que dan como resultado un desplazamiento de la cantidad incorrecta/a la posición incorrecta. Ocurre en dispositivos móviles sin importar el navegador. No sucede cuando se ve en el escritorio y se reduce la ventana del navegador al tamaño del dispositivo móvil, por lo que solo está haciendo esto en el dispositivo móvil.

El JS que proporciona esta funcionalidad está en la class sliderComponent en el evento onButtonClick que se puede encontrar en assets/global.js , alrededor de la línea ~553:

global.js

 onButtonClick(event) { event.preventDefault(); const slideScrollPosition = event.currentTarget.name === 'next' ? this.slider.scrollLeft + this.sliderFirstItem.clientWidth : this.slider.scrollLeft - this.sliderFirstItem.clientWidth; this.slider.scrollTo({ left: slideScrollPosition, behavior:'smooth' }); }

Un juego con el uso de window.outerWidth , como se muestra a continuación, no ayuda:

 const slideScrollPosition = event.currentTarget.name === 'next' ? this.slider.scrollLeft + window.outerWidth : this.slider.scrollLeft -window.outerWidth

¿Alguien puede ayudarme a entender cuál es el problema aquí y ayudarme a encontrarlo o brindarme una solución para solucionarlo?

Gracias por adelantado.