Transition lagged on Chrome iOS

[thanhlmm]

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

latest

Description

The slide is lagged on Chrome browser iOS, it is fine in Safari

RPReplay_Final1643250860.mov

As I investigated that, most of the slide lib have the same issue with Chrome on iOS, so I think it is because of iOS or Chrome core

Reproduction Link

No response

Steps to Reproduce

Test in Splidejs demo page

Expected Behaviour

Same behavior as Safari

[NaotoshiFujita]

This is the known issue of CSS transition on iOS Chrome. All CSS transitions are broken after switching tabs.
I don't know why but the team hasn't fixed it for years.

https://bugs.chromium.org/p/chromium/issues/detail?id=899130
https://bugs.chromium.org/p/chromium/issues/detail?id=1231712

If you really need to solve the problem, turn on the useScroll option (this is not documented on my web).

splide/src/js/types/options.ts

Line 163 in 5e0c2ac

useScroll?: boolean;

If true, the slider will use requestAnimatonFrame to move the slider instead of CSS transition.

• The performance is worse than CSS transition
• It does not work on the fade mode

[timohausmann]

I'm experience the same issue on iPhone SE Chrome, iOS 15.1, @splidejs/svelte-splide 0.1.18. This not only happens after switching tabs but also when first opening the page, also on the homepage demo. useScroll: true fixed the issue.

edit: ok, after restarting chrome the issue doesnt show up.