When CSS zoom is used, the slides in the carousel does not scroll correctly

[petertflem]

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v4.1.3

Description

We're using the CSS zoom property, and it causes the carousel to calculate the incorrect distance to move the slides.

It can be reproduced on the splidejs homepage as well, here I added zoom: 1.25 on the body tag, and transitioned the carousel to the second slide. The third slide should not be visible here, but it is.

I attempted a work around using a custom transition to adjust the value it uses to translate the slides:

        // Converts the index to the position
        const destination = Move.toPosition(index, true);
 
        ...

        let zoomDelta = 0;

        if (viewportWidth >= 1950) {
            zoomDelta = destination * 0.1667;
        } else if (viewportWidth >= 1700) {
            zoomDelta = destination * 0.115;
        } else if (viewportWidth >= 1550) {
            zoomDelta = destination * 0.04764;
        }

        ...

        // Moves the carousel to the destination.
        Move.translate(destination - zoomDelta);
        
        ...

But, it turned out what worked for Chrome did not work in Firefox. In Safari, it seems to work out of the box, so at least part of the issue might be how different browsers handle the zoom.

I tried using the same reproduction steps on the carousel page in shadcdn, and I can't see the same problem in Chrome.

Reproduction Link

No response

Steps to Reproduce

1. On the splidejs home page, add zoom: 1.25 to the body tag
2. Click next slide on the first carousel
3. The third slide is now visible. Without the zoom set, it is not visible.

Expected Behaviour

The third slide should not be visible.

[ofekbu]

I came across the same issue and wrote a script that overrides the function that changes the transform of the auto-scroll.

The issue was fixed by containing the transformX update inside requestAnimationFrame, so it seems that the cause of this issue was that Splide updated the transformX multiple times per frame (depending on the zoom level) rather than just once.

requestAnimationFrame(() => {
    mutation.target.style.transform = `translateX(${correctedX}px)`;
});

Hope it gives you an easier time resolving this :)