Flickering on swiping with loop="true"

[ipa1981]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/p/sandbox/swiper-zoom-forked-mibid1?file=%2Findex.html%3A13%2C1

Bug description

In a loop more transition between slides causes a flick:

Screencast.from.2023-05-12.19-56-31.webm

Expected Behavior

No flick

Actual Behavior

The UI flicks on switching between slides

Swiper version

9.3.1

Platform/Target and Browser Versions

Any browser. Desktop (FF, Chrome), Mobile Opera tested

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• 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

[ipa1981]

The issue is still reproducible in 9.4.1

[4dimage]

Swiper 10.0.4, same flickering issue - solved with a hack :-/

Hi,
i just switched from v8 to v10 and encountered the same flickering issue EACH time the loopFix() function reorders the DOM .swiper-slide children in the .swiper-wrapper.

The flickering occurs on Windows 10 desktop (actual Chrome, Firefox) and iPad (Safari on iPad Air 2, iPadOS 15.7.7).

My HTML layout has 5 slides with loop=true and slidesPerView=3. The flickering occurs only during an active user drag. Not when navigation is executed via the prev/next controls or autoplay.

I can't provide a complete sample code of my HTML document here. The Swiper layout looks like this:

But i tried to solve the problem directly in the minified Swiper.js code.

1. My first attempty was to decouple the DOM reordering in a requestAnimationFrame handler. My thought was that there might be some synchronisation lack between DOM ordering and rendering. But decoupling the loopFix function ended up in chaotic behaviour of the slider.

2. I changed the code that calls loopFix in that way that it is now called in an async function that returns a Promise. That doesn't fix the flickering until i changed the inner async code.
   Now i DO NOT resolve the pending promise. This solved the flickering issue completely on Desktop as well as on iPad Safari.

Sorry, i did my changes in the minified code: swiper.bundle.min.js, v 10.0.4
Starting at line 1547.

This is what i changed in the minified function "... function X(e){..."

async function X(e){
...

		E = !0),
		s.emit("sliderMove", c),
		i.isMoved = !0,
		i.currentTranslate = v + i.startTranslate;
		let x = !0
		  , S = r.resistanceRatio;
		if (r.touchReleaseOnEdges && (S = 0),
		v > 0 ? (
			y &&
			!E &&
			i.currentTranslate > (r.centeredSlides ? s.minTranslate() - s.size / 2 : s.minTranslate()) &&
//2023-07-24, 4dimage
(
	await (async ()=>{
		return new Promise((resolve)=>{
			s.loopFix({
				direction: "prev",
				setTranslate: !0,
				activeSlideIndex: 0,
					c4dtest:-1
			});
			//NICHT resolven !
			//resolve(true);
		})
	})()
),


		i.currentTranslate > s.minTranslate() && (x = !1,
		r.resistance && (i.currentTranslate = s.minTranslate() - 1 + (-s.minTranslate() + i.startTranslate + v) ** S))) : v < 0 &&
		(
			y &&
			!E &&
			i.currentTranslate < (r.centeredSlides ? s.maxTranslate() + s.size / 2 : s.maxTranslate()) &&


//2023-07-24, 4dimage
(
	await (async ()=>{
		return new Promise((resolve)=>{
			s.loopFix(
				{
					direction: "next",
					setTranslate: !0,
					activeSlideIndex: s.slides.length - ("auto" === r.slidesPerView ? s.slidesPerViewDynamic() : Math.ceil(parseFloat(r.slidesPerView, 10))),
						c4dtest:1
				}
			);
			//NICHT resolven !
			//resolve(true);
		});
	})()
),


		i.currentTranslate < s.maxTranslate() && (x = !1,
		r.resistance && (i.currentTranslate = s.maxTranslate() + 1 - (s.maxTranslate() - i.startTranslate - v) ** S))),

...

Now my question is: this hack solved the flickering issue - but i have no idea WHY this works ?!

I guess it's no good idea to create Promises that get never resolved. Does this code change the execution order of the whole chain. Or does it change the timing of the DOM reordering and DOM rendering?

Maybe this hack gives you some ideas how to really fix this issue with proper code ;-)

swiper-bundle.c4d-esm-loopfix.zip

[barksploit]

Issue still reproducible on 10.1.0

Codepen here https://codepen.io/barksploit/pen/JjeVwxJ

Downgrading to 8.4.7 fixes the issue. So it is a problem with the new loop behaviour