fix(effectx): fix Safari issue with rotates even to 90deg

fixes #7167
nolimits4web · Nov 8, 2023 · e005b69 · e005b69
1 parent 8eb3b44
commit e005b69
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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) {