Choppy transitions between slides on mobiles

[AbsurdePhoton]

Check that this is really a bug

• [X] I confirm

Reproduction link

none

Bug description

Choppy transitions between slides, but it depends upon the browser used. Tested with effects : cube, coverflow, flip Tested with browsers : all major browsers including Safari on IOS - latest versions

Expected Behavior

Fluid swipe/transition between slides

Actual Behavior

coverflow and cube effects are the most choppy flip behaves a bit faster, but it is a simpler effect!

These browsers are very slow, sometimes unresponsive with cube or coverflow effect:

• Firefox
• Opera Mini

Choppy:

• Chrome
• Brave
• Opera

A bit more fluid:

• Kiwi
• Samsung Internet
• Safari on IOS

Maybe a clue: I noticed on my desktop under Linux, with Chrome and Firefox, that the CPU usage becomes a bit high when swiperjs is active : about 26% for the isolated process !!! My computer is a lot faster than any mobile device, so effects are fluid of course. But swiperjs consumes too much CPU to be honest.

Here is the configuration I used :

			  // Optional parameters
			  preloadImages: false,
			  lazy: { // lazysizes not enabled here so use swiperjs lazyload instead
			     enabled: true,
			     loadPrevNext: true,
			  },
	        speed: 1000,
			  loop: true,
			  grabCursor: false,
			  preventInteractionOnTransition: true, // strange interactions on iphone without that
			  effect: "coverflow",
	        coverflowEffect: {
	          rotate: 50,
	          stretch: 1,
	          depth: 100,
	          modifier: 1,
	          slideShadows: false,
	        },
	        autoplay: {
	          delay: 4000,
	          disableOnInteraction: false,
	        },
	        pagination: {
	          el: ".swiper-pagination",
	          clickable: true,
	        },
			  // Navigation arrows
			  navigation: {
			 	 nextEl: '.swiper-button-next',
			 	 prevEl: '.swiper-button-prev',
			  }

Swiper version

latest v8

Platform/Target and Browser Versions

android, ios, linux

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR

[mindpixel-labs]

I am experiencing this issue as well on iOS 15.1 Chrome with choppy animations. It works fine on Safari iOS, however.

[madebyfabian]

I am experiencing this as well.

• Chrome iOS v102: Works fine
• Safari iOS 15.5: Choppy Slide Transitions

[madebyfabian]

Though it seems like this is only an issue on iPhones with the ProMotion (120hz) Display. Can you confirm that? @AbsurdePhoton

[AbsurdePhoton]

No it also happens on my Samsung Galaxy J9 2018, AND there are differences between browsers: some are faster enough to run the animations without too much stuttering (kiwi browser, safari on IOS) and others like Chrome are choppy under Android or IOS. The only iphone I have is a SE2020, so I can't tell for others models.

[markky21]

I also experiencing this problem.

Chrome iOS v103: Choppy Edge iOS v102: Choppy Safari iOS 15.5: Almost smooth transition

I'am using modules: Lazy, Navigation, Pagination, A11y, Keyboard, Zoom, History React version.

Is there a plan to fix this problem?

[sofly]

Any news?

[peterbruins]

In my case, this issue was be resolved by setting option cssMode: true.

Note that this seems to change the way Swiper works drastically, and also disables some features.

https://swiperjs.com/swiper-api#param-cssMode

[AlexanderBredun]

same problem

chrome ios 16.2 iphone 14 - Choppy safari ios 16.0 iphone xs max - Choppy chrome ios 16.0 iphone xs max - works fine

are you going to fix this? its kind of a big deal

[nolimits4web]

Want best performance, use cssMode