Mobile URL bar resizing causes autoplaying carousel jump to the edge of a slide on initial scroll

[moymadethis]

I have an autoplaying, smooth, looping carousel. This works as intended with the exception of one instance.

When testing the carousel on my iPhone 15, with both Safari and Chrome, the carousel scrolls as it should on load. However as soon as I scroll down the page and the address bar resizes, the carousel slides jump so one aligns to the edge of the carousel - I assume the slide that is closest to the edge/starting point, as if 'snap' was enabled. Once that occurs, the carousel scrolls as intended again and scrolling up/down the page causes no issues. It just occurs on the first scroll. So if you refresh the page this would start over again.

I've include the core HTML/Javascript in this JSFiddle for reference but I appreciate that might be difficult to view on mobile! But it should demo the expected effect - and I've added the Keen-specific script at the bottom of the post.

Has anyone encountered this and can anyone think of a solution? To prevent this?

I suppose a linked issue/question would be what is the best way to implement a smooth, auto-scrolling, looping carousel like in the example? Maybe it is the approach I've taken rather than the iOS 'bug'?

Thanks in advance!

Keen-Slider specific script:

var animation = {
  duration: 32000,
  easing: (t) => t
}
new KeenSlider("#gallery-slider", {
  dragSpeed: 1,
  loop: true,
  mode: "free",
  slides: {
    perView: 1.5,
    renderMode: "performance",
    spacing: 8
  },
  breakpoints: {
    '(min-width: 768px)': {
      slides: {
        perView: 3,
        spacing: 8
      }
    },
    '(min-width: 1024px)': {
      slides: {
        perView: 4,
        spacing: 8
      }
    }
  },
  created(s) {
    s.moveToIdx(5, true, animation)
  },
  updated(s) {
    s.moveToIdx(s.track.details.abs + 5, true, animation)
  },
  animationEnded(s) {
    s.moveToIdx(s.track.details.abs + 5, true, animation)
  }
})