I am using 2 nestable sliders (data is being pulled from CPTs) on this page. Both are running extremely smooth on desktop, but transition effects are completely broken (not smooth at all) on my iPhone 13 Pro (no caching running).
Slider 2 - Testimonials
Link to video: https://video.beziehungsweise.cc/conversations/db990482-ec7d-5321-862a-02ece10d27e6
Same here. On desktop I have a very nice smooth and dynamic transition. On mobile my client statements are more or less jumping/replacing themselves, even skipping some testimonials. Additionally the slider is not well usable with finger dragging to the next/previous statement.
@timmse Could you please take a look? If it’s a bug, it needs to be fixed very soon. Otherwise those new nestable sliders are more or less useless.
You are right. By default I am using mobile Google Chrome on my phone (where animations are completely broken), but it seems to work correctly on mobile Safari …
Kinda strange, cause both are using Safari-engine as far as I know.
I have found another issue with nestable slider on desktop … unfortunately
Autoplay behavior:
If I allow slides to autoplay, they are playing correctly one after the other. Pagination dots are being marked as active correctly.
Issue when clicking arrows:
If I click the arrows, the slides are moving into the wrong direction (same for BOTH arrows).
Click on left arrow => moves the slides to the right (though should move to the left)
Click on right arrow => moves the slides to the left (though should move to the right)
Hey Michael,
We have already detected and fixed the bug with the navigation arrows. Thanks for the hint, though!
However, I still don’t know why the slider doesn’t run smoothly on your iPhone
@timmse Please allow me to reopen this one. The slider transition issue on iOS chrome on iPhone13 Pro is still left open and we do receive negative feedback from a few customers already after sending out a mail-campaign. Could you please re-check if possible. From my point of view it seems to be an issue with iPhone 13 Pro only?
On iPhone 13 Pro nested slider transitions …
=> are working perfectly fine on Safari
=> are not working at all on Chrome (though it’s working perfectly fine on e.g. iPhone Xs)
I have made some phone screen videos on iPhone 13 Pro:
I think we are getting closer. I have tested your Autoplay link and discovered:
Chrome - iPhone XS:
Autoplay works and slides nicely, hitting arrows also works => Perfect
Chrome - iPhone 13 Pro:
Autoplay works, but doesn’t scroll nicely => transition jumps => not working correctly
Hitting arrows also works, but same jumping transition => not working correctly
Just wanted to quickly jump in, are you sure you don’t have ‘reduce motion’ enabled in your settings on the iPhone 13 Pro? Just because this is exactly the result you’d see if that setting was on, where it removes the transform.
Settings > Accessibility > Motion
When I’'m testing the same Splide demos on iPhone 13 Pro through browser testers it’s working correctly. I would check through all of your accessibility settings on the device, it’s also possible that low battery mode could cause this also.
I can confirm the problems with Chrome on iPhone 13 Pro. I have also tested with Brave, Edge, Firefox and Safari. All of them have no problems with this animations…
I have checked all my accessibility settings, nothing is turned on. No low battery mode active …
Furthermore I do not remember that I have ever turned on any reduce motion settings in iOS settings or in ios chrome browser settings (and it works on all ios browsers except on ios chrome)
Those browser testers (at least the ones I know) do always work perfectly fine, but it‘s unfortunately a different result on real device.
But if it‘s caused by ACSS, is there a way to turn it off (don’t wanna start a discussion if it should be on or off)? Just wanna know if it is possible?
If you follow the accessability rules you’ll need to build a static version that’s it.
Automaticss don’t give you an option to deactivate this.
You can deactivate reduce motion on your hardware.
But that don’t solve it for any other kind of user who has this activated.
You’re also able to comment it out manually in the automatic.css file on line 33.
Tbh I didn’t try this yet. It may cause problems. Also this isn’t safe for updates.
Maybe you’re also able to overwrite the query with an extra stylesheet
As there are now multiple people confirming the issue, and the issue appears also on the official SplideJS demos, the fastest way to solve this is going to be to report as a bug to the SplideJS dev. Ideally, this would be fixed in the Splide library itself, then Bricks just bump up the version in their next update. Rather than Bricks team trying to figure out how to patch. This way at least you have more people working to solve the problem.
Report here…
There isn’t a bug report for it currently, so likely the dev doesn’t even know about it.
Out of interest, (which may give a clue to why Chrome isn’t running the transforms) do you also see issues on that device when looking at the autoplay options from these librarys?..
Actually I’m going to report it myself now, to speed things up. But I’m unable to test myself as i don’t have the real iPhone device (and the same problem doesn’t show up in browser testers). I’ll share your video. Add to the bug report if you have any extra info (ie Chrome version number, is it just the autoplay demo or some of the others ? Is it only the Splide demos or also the other carousel/sliders linked to above?).
