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.85k stars 419 forks source link

Transforms not working on iPhone 13 Pro (chrome) #898

Closed wplit closed 2 years ago

wplit commented 2 years ago

Checks

Version

v4.0.7

Description

https://video.beziehungsweise.cc/conversations/27ecce3d-501e-561f-b316-eaffdb7bba86

Basically, the transforms often don't work when viewing on Chrome on iPhone 13 Pro. Instead, we see just a fade. Confirmed with multiple users on different devices. Only on the iPhone 13 Pro, not iPhone 13, and only in Chrome.

Behaviour similar to if 'reduce motion' was enabled in the device settings, where the transforms are turned off.

Can't be seen when using browser testers (lambdatest or browserstack don't show issue), only on the real device. Same devices using Safari or other browsers will work fine.

Reproduction Link

https://splidejs.com/

Steps to Reproduce

View the splide home page through iPhone 13 Pro (chrome) and scroll to the autoplay demo.

Expected Behaviour

Should be the same as other devices.

beziehungsweise commented 2 years ago

I confirm the above mentioned issue and add some details:

For example, both Swiper and Flickity demos are working perfectly fine (all demos), even on iPhone 13 Pro AND chrome browser.

Splide demos on iPhone 13 Pro: About 80 % of all demos seem to have a transition/transform issue on only chrome browser (it‘s not only autoplay, other effects too). 20 % of the demos are working perfectly fine.

Video from real device: Can’t add a video now cause I am only on the phone these days and handling uploads/links/… always is a bit inconvenient from the phone as we all know. Will add some end of this week!

Chrome version: Most current version

wplit commented 2 years ago

Update: setting 'useScroll: true', seems to solve it.

But obv then we lose the CSS transitions for all other browsers, which is arguably a smoother performance. Ideally there'd be a built-in condition for the browser/device that has the issue, and for everybody else is defaults to the transitions.

NaotoshiFujita commented 2 years ago

Duplicated: https://github.com/Splidejs/splide/issues/634#issuecomment-1023016267

This is not a Splide issue, but chrome's.