IOS App内嵌H5 swiper 轮播出现卡顿白屏闪烁

　　　话说在前头：前端开发同学遇到这个问题不慌，因为接下来你要踩的坑我都帮你们踩完了，所以有了这一篇博客。希望能帮到你

　　　轮播组件：swiper@4.5.1 （4x稳定的最后一个版本）

　　　设备：ios版本15x ，14和16版本都挺好的，问题仅在ios15的版本

　　　出现现象：左右滑动卡顿，不连手，放开的这一瞬间会卡一下。在同一部手机的safari或微信中没有这个问题，仅仅在app中有这个问题。

　　一些案例：https://ask.csdn.net/questions/7544894   https://juejin.cn/post/7023231843004579877

　　当然全都没有解决办法，只是都遇到。

　　我试过了网上几乎所有办法，3x和5x版本都换过，无果...

　　ok，网上找不到解决办法，老规矩，上github翻翻issue，有用，但不是特别有用。

　　办法1： 升级5x版本，有个新增的属性  cssMode  这个属性开启后用现代CSS Scroll Snap API。它不支持Swiper的很多功能，但可能会带来更好的性能。 会将一些js复杂的运算和过渡用css来代替

　　但是：少了很多功能（不推荐）

var mySwiper = new Swiper('.swiper-container', { cssMode: true });

　　办法2：css启用硬件加速（但是只能解决白屏闪烁，卡顿依旧）

.swiper-slide{
　　-webkit-backface-visibility: hidden;
　　-webkit-transform: translate3d(0,0,0);
}

.swiper-wrapper{
　　-webkit-transform-style: preserve-3d;
}

　　办法3  https://github.com/nolimits4web/swiper/issues/4493

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 });

    }
})

　　　　有用，但是只适用于整页整页滑动，多列并不是适用。

　　办法4：用Mac电脑下载个xcode链接Iphone做一个Demo App 内嵌下你的H5 页面。看是否正常，如果正常的话。那毫无提问，问题不前端，让IOS开发去排查问题。顺利解决

　　最后：我这边是ios开发定位到了，确实是App的某个地方影响了全局的轮播，卡了好多天的问题，唉~~，如果你们也遇到过，把你们的解决办法说一下吧！！