diff --git a/src/modules/effect-coverflow/effect-coverflow.mjs b/src/modules/effect-coverflow/effect-coverflow.mjs index 86e2eede4..94725b8e9 100644 --- a/src/modules/effect-coverflow/effect-coverflow.mjs +++ b/src/modules/effect-coverflow/effect-coverflow.mjs @@ -57,6 +57,14 @@ export default function EffectCoverflow({ swiper, extendParams, on }) { if (Math.abs(rotateX) < 0.001) rotateX = 0; if (Math.abs(scale) < 0.001) scale = 0; + if (swiper.browser && swiper.browser.isSafari) { + if ((Math.abs(rotateY) / 90) % 2 === 1) { + rotateY += 0.001; + } + if ((Math.abs(rotateX) / 90) % 2 === 1) { + rotateX += 0.001; + } + } const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scale})`; const targetEl = effectTarget(params, slideEl); targetEl.style.transform = slideTransform; diff --git a/src/modules/effect-creative/effect-creative.mjs b/src/modules/effect-creative/effect-creative.mjs index bcbc57b15..4a9390e9d 100644 --- a/src/modules/effect-creative/effect-creative.mjs +++ b/src/modules/effect-creative/effect-creative.mjs @@ -88,7 +88,11 @@ export default function EffectCreative({ swiper, extendParams, on }) { }); // set rotates r.forEach((value, index) => { - r[index] = data.rotate[index] * Math.abs(progress * multiplier); + let val = data.rotate[index] * Math.abs(progress * multiplier); + if (swiper.browser && swiper.browser.isSafari && (Math.abs(val) / 90) % 2 === 1) { + val += 0.001; + } + r[index] = val; }); slideEl.style.zIndex = -Math.abs(Math.round(slideProgress)) + slides.length; diff --git a/src/modules/effect-cube/effect-cube.mjs b/src/modules/effect-cube/effect-cube.mjs index 620c47f7d..46bfb0eda 100644 --- a/src/modules/effect-cube/effect-cube.mjs +++ b/src/modules/effect-cube/effect-cube.mjs @@ -124,6 +124,9 @@ export default function EffectCube({ swiper, extendParams, on }) { if (progress <= 1 && progress > -1) { wrapperRotate = slideIndex * 90 + progress * 90; if (rtl) wrapperRotate = -slideIndex * 90 - progress * 90; + if (swiper.browser && swiper.browser.isSafari && (Math.abs(wrapperRotate) / 90) % 2 === 1) { + wrapperRotate += 0.001; + } } slideEl.style.transform = transform; if (params.slideShadows) { @@ -137,7 +140,7 @@ export default function EffectCube({ swiper, extendParams, on }) { if (isHorizontal) { cubeShadowEl.style.transform = `translate3d(0px, ${ swiperWidth / 2 + params.shadowOffset - }px, ${-swiperWidth / 2}px) rotateX(90deg) rotateZ(0deg) scale(${params.shadowScale})`; + }px, ${-swiperWidth / 2}px) rotateX(89.99deg) rotateZ(0deg) scale(${params.shadowScale})`; } else { const shadowAngle = Math.abs(wrapperRotate) - Math.floor(Math.abs(wrapperRotate) / 90) * 90; const multiplier = @@ -149,7 +152,7 @@ export default function EffectCube({ swiper, extendParams, on }) { const offset = params.shadowOffset; cubeShadowEl.style.transform = `scale3d(${scale1}, 1, ${scale2}) translate3d(0px, ${ swiperHeight / 2 + offset - }px, ${-swiperHeight / 2 / scale2}px) rotateX(-90deg)`; + }px, ${-swiperHeight / 2 / scale2}px) rotateX(-89.99deg)`; } } const zFactor = diff --git a/src/modules/effect-flip/effect-flip.mjs b/src/modules/effect-flip/effect-flip.mjs index 5bdebfec1..04af07d0c 100644 --- a/src/modules/effect-flip/effect-flip.mjs +++ b/src/modules/effect-flip/effect-flip.mjs @@ -65,6 +65,15 @@ export default function EffectFlip({ swiper, extendParams, on }) { rotateY = -rotateY; } + if (swiper.browser && swiper.browser.isSafari) { + if ((Math.abs(rotateY) / 90) % 2 === 1) { + rotateY += 0.001; + } + if ((Math.abs(rotateX) / 90) % 2 === 1) { + rotateX += 0.001; + } + } + slideEl.style.zIndex = -Math.abs(Math.round(progress)) + slides.length; if (params.slideShadows) {