I'm trying to solve some behavioural issues on mobile (iOS 14.8.1) with product image slider elements in a Shopify Dawn2.0 theme (like a carousel, theme calls it a 'slider') that have a button, like below:

which when clicked in order to scroll, scrolls by the incorrect amount causing the edge of the next image to be cut off from view. e.g.

When swiping the slider (internal OS magic) it stops at the correct place, it's just these slider element buttons which result in a scroll of the incorrect amount/to the incorrect position. It happens on mobile no matter the browser. It does not happen when viewing on desktop and shrinking browser window down to mobile size, so it's just on mobile that it's doing this.

The JS that's providing this functionality is in the class sliderComponent in the onButtonClick event which can be found in assets/global.js, around line ~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'
    });
  }

A play with using window.outerWidth, as below, does not help:

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

Can anyone help me understand what the problem is here and help me find, or provide me with a solution to fix this?

Thanks in advance.