[VanillaJS][v5] translate3d values for slides are sometimes wrong

[BOLT04]

Hello,

I'm using keen-slider v5 and I'm having issues with the slide positions when clicking the arrows to navigate slides. The slider I'm using has dots and arrows and this issue only happens sometimes. Usually when we navigate the page, the slider is rendered and immediately after we click one of the arrows, but the entire page or slider instance hasn't fully loaded.

From what I investigated, the value for the x axis used in the function slidesSetPositions sometimes has the wrong value. But it's not always the same value for a given slide. While debugging, only this variable would change:

keen-slider/src/keen-slider.js

Line 487 in 118deaa

const absoluteDistance = trackSlidePositions[idx].distance * width

If this distance changed then sometimes my slides would have the wrong position, meaning they get "half-cut".
example of slides with wrong position:

example of slides with correct position:

It seems to only happen after the first click on one of the arrows, if we go back to these slides after clicking the arrow, they show up in the correct position.

This is my code snippet with the keen-slider options:

const keenSliderConfig = {
      loop: true,
      controls: true,
      rubberband: false,
      centered: true,
      mode: "free-snap",
      slidesPerView: 2,
      spacing: 10,
      breakpoints: {
          "(min-width: 1280px)": {
              controls: false,
              centered: false,
              slidesPerView: 5,
              spacing: 10,
          },
      },
      created: (instance) => {
          const relativeSlide = instance.details().relativeSlide;
          const absoluteSlide = instance.details().absoluteSlide;
          sliderWrapper.querySelector(".arrow--left").addEventListener("click", (e) => {
                  instance.refresh();
                  instance.moveToSlide(absoluteSlide - 5);
              });
               sliderWrapper.querySelector(".arrow--right").addEventListener("click", (e) => {
                  instance.refresh();
                  instance.moveToSlide(absoluteSlide + 5);
              });
          });
      },
      slideChanged(instance) {
          // update dots and classes
      },
};

new KeenSlider(".slider", keenSliderConfig);

I'm using moveToSlide for the arrows but using instance.prev and next I get the same problem.
Can someone help me figure out why the x position is wrong or what other problem could cause this issue?

Any help is appreciated.
Thanks!