Swiping on iOS 14.5/14.6 in latest Chrome Version slow and hangs

[kolorfilm]

• Swiper Version: 6.5.7
• Platform/Target and Browser Versions: iOS 14.5 Chrome 87.0.4280.163 (Safari in latest version works!)

What You Did

Just swiping, you can see it as well in your own demo and here (default) : https://stackblitz.com/edit/swiper-demo-1-default?file=index.html

Swiping hangs and is quite slow.

Expected Behavior

Smooth swiping

Actual Behavior

Swiping is slow and hangs.

iOS 14.5 Chrome 87.0.4280.163 (the broken one):
https://user-images.githubusercontent.com/26705027/116368514-b3856280-a808-11eb-8950-76ca063f5b28.mp4

iOS 14.4.2-Chrome 87.0.4280.163 (the good one):
https://user-images.githubusercontent.com/26705027/116369385-9d2bd680-a809-11eb-9bfe-8ddfbff42d82.MP4

[Alldar]

Safari has the same issues

Swiper Version: 6.5.8
Platform/Target and Browser Versions: iOS 14.5 Safari latest version

RPReplay_Final1619631402.MP4

[CodeWithOz]

@kolorfilm @Alldar what was the last version you know that didn't have this problem? I want to upgrade but I'd like to avoid this until it's fixed.

[nolimits4web]

On iOS 14.5 can’t see anything like that in Chrome and in Safari

[kolorfilm]

@kolorfilm @Alldar what was the last version you know that didn't have this problem? I want to upgrade but I'd like to avoid this until it's fixed.

I only know iOS 14.4.2 didn‘t have this problem. It seems it is a general problem by chrome.:

https://piunikaweb.com/2021/04/22/chrome-content-on-ios-gets-squashed-on-changing-orientation-for-some/

This workaround there seems to fix the problem. Of course this is not a good option as normal users won‘t change that setting.

[srg-b]

we've seen a 25% click-through drop on the carousels using the swiper for devices running iOS 14.5.x, compared to those running 14.4.2

[tschortsch]

I'm having the same issue with Chrome 90.0.4430.78 on iOS 14.5.1. The swiping animation is really laggy/buggy. In Safari it seems to be ok for me.
As @kolorfilm mentioned the issue can be reproduced on the demos page of swiper: https://swiperjs.com/demos

[tschortsch]

As a workaround I could switch to using the cssMode when the website is opened with Chrome for iOS 14.5. Of course this can only be done if you don't rely on a lot of fancy features which aren't supported with the cssMode.

Here is the helper function which I'm using to detect Chrome for iOS 14.5:

const isChromeForIOs145 = () => {
	const userAgent = window.navigator.userAgent;
	const isChromeForIOs = /CriOS/i.test(userAgent);
	if (isChromeForIOs) {
		const iOsMatch = userAgent.match(
			/(.+)(iPhone|iPad|iPod)(.+)OS[\s|\_](\d+)\_?(\d+)?[\_]?(\d+)?.+/i
		);
		if (iOsMatch && iOsMatch.length >= 6) {
			const iOsVersionMajor = parseInt(iOsMatch[4], 10);
			const iOsVersionMinor = parseInt(iOsMatch[5], 10);
			if (iOsVersionMajor >= 14 && iOsVersionMinor >= 5) {
				return true;
			}
		}
	}
	return false;
}

[malininss]

I have the same problem, the bug is reproduced in iOS 14.5 (iPhone 12 mini) in safari and in iOS 14.6 (iphone 12 pro) in Chrome.
Unfortunately, the cssMode isn't to suit for me

[realityfilter]

I noticed it on my iPad pro only. In normal Safari. Restarting the device fixed it for me. So I think it is more an iOS / Safari bug.

[PhilipCrumpton]

I can confirm both the bug and that cssMode: true resolves the issue (with reduced features of course). Big thanks to @tschortsch for the helper function!

[artshevtsov]

Nothing changes. I made this video 1 year ago https://youtu.be/gev1PvGWsKg
animation becomes smooth after chrome mobile restart. This bug is related with ios. If i am not mistaken, this behavior persists since ios 13. All js animations look jaggy after switching between tabs. requestAnimationFrame does not help.
UPDATE: I see the same problem with another swipe library:
https://www.youtube.com/watch?v=giDYL--lKp0
smooth animation at start, then jaggy after swithing tab state (minimized/expanded), then smooth again after chrome restart
Video recorded on iphone XR, iOS 14.6, chrome 91.0.4472.80

[az-vm]

Hello

With IOS 14.6 on safari and firefox, works well, but on google chrome, still not smooth swiping.

Any workaround on this yet ?

[heitorb]

Weird behavior. I had it working smoothly always with Angular 11 on iPhone Chrome. Updated to 12 and started seeing the clunky behavior. It is on iPhone Chrome only. I saw one of the posts saying that restarting fixes it. I did that and it indeed fixed it, but if I clear my chrome cache, it starts happening again, unless I restart.

[mingttong]

Swiper Version: 6.7.0

I had the same problem in IOS 14.6, it will appear on the webview of our app, but works well on browser. And I found that using transition & translate3d/translate to do animation will slow and hangs (use margin & transition is fine) in IOS 14.6, and Swiper uses transition & translate3d to do animation.

My solution is to implement the animation myself:
In the setTranslate event of swiper, set transitionDuration to empty, set translate back to the original value, and then implement the animation by yourself through requestAnimationFrame. It works well in IOS 14.6.

function easeOut(currentTime, startValue, changeValue, duration) {
    currentTime /= duration;
    return -changeValue * currentTime * (currentTime - 2) + startValue;
}

function getTransitionSimulator(ele, distance, duration, callback) {
    let handle;
    let resolve;
    return () => {
        let promise = new Promise(res => {
            resolve = res;
        });
        let startTime = performance.now();
        cancelAnimationFrame(handle);
        function _animation() {
            let current = performance.now();
            // distance to move this frame
            let disVal = easeOut(current - startTime, 0, distance, duration);

            callback(ele, disVal);
            if ((current - startTime) / duration < 1) {
                handle = requestAnimationFrame(_animation);
            } else {
                cancelAnimationFrame(handle);
                resolve();
            }
        }
        handle = requestAnimationFrame(_animation);
        return promise;
    };
}

swiper.on('setTranslate', (swiper, targetTransVal) => {
    const wrapper = swiper.$wrapperEl[0]; // wrapper element
    // when use transition to do animation
    if (wrapper.style.transitionDuration !== '0ms') {
        // get origin translate value
        const curTransVal = this.swiper.getTranslate();
        // cancel the animation of transition
        wrapper.style.transitionDuration = '';
        wrapper.style.transform = `translate3d(${curTransVal}px, 0px, 0px)`;

        // use requestFrameAnimation to do animation my self
        const transSimulator = getTransitionSimulator(wrapper, targetTransVal - curTransVal, 300, (el, val) => {
            el.style.transform = `translate3d(${curTransVal + val}px, 0px, 0px)`;
        });
        await transSimulator();
        // End the transition, call the callback (simulate the internal implementation of Swiper)
        swiper.onSlideToWrapperTransitionEnd.call(wrapper, { target: wrapper });

    }
})

[rubenmeines]

I have this issue as well on Chrome for iOS. On iOS Safari it works fine. You can see it by going to the https://swiperjs.com/demos on your mobile iOS device in the chrome browser and just swipe. I have iOS 14.6 - iPhone SE from 2021. I'm using swiper version: 6.7.5.

[m1911star]

I'm using 6.7.5 with virtual slides feature, it's slow in ios 14, cssMode is not suite for me

[emgerold]

Same issue with swiper v6.7.5 on iOS 14.6 (iPad Air 4th Gen)

[peace195]

I have same issue on iOS 14.5 and 14.6 on Mobile Chrome. Safari is ok. Is it an iOS bug or Swiper bug?

[peace195]

Does this attribute of css "transition: transform ease-out" affect this issue?

[jfarris587]

Similar to @peace195 This is a problem in iOS 14.6 on Mobile Chrome, However, this is not a problem with safari mobile. Its smooth in safari but lags in chrome mobile.

[rahulsuresh-git]

Are we hoping to get a fix for this soon or is there any workaround?

[nolimits4web]

Closing as not related to Swiper