Splidejs / splide

Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.
https://splidejs.com
MIT License
4.83k stars 418 forks source link

Slider is jittery on Mac's Safari and iOS #1253

Open bhaveshxrawat opened 9 months ago

bhaveshxrawat commented 9 months ago

Checks

Version

v4.1.4

Description

Problem

I'm using Drag Free Snap feature in my website which is built using Astro and noticed that the slider are jittery on just Mac Safari and all browsers on iOS (makes sense, all browser are just re-skinned Safari browser).

After further inspection, I noticed that using will-change property fixes that and makes the slider smooth. Before that, I compared my site's slider with official website's one and it looked fine.

https://github.com/Splidejs/splide/assets/100124098/62645efb-86b7-4e8a-b00a-1226fce10548

Reproduction Link

No response

Steps to Reproduce

I'm using drag free snap config

Splide.defaults = {
        autoWidth: true,
        autoHeight: true,
        drag: "free",
        snap: true,
        pagination: false,
        arrows: true,
        gap: "1rem",
        breakpoints: {
            769: {
                gap: "0.75rem",
                arrows: false,
            },
        },
    };

Expected Behaviour

The sliders are jittery which are resolved by adding will-change.