fix: improved 3d rotate fix in Safari

fixes #7532
nolimits4web · Jul 15, 2024 · cb83879 · cb83879
1 parent fd9f9c0
commit cb83879
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 40 deletions.
diff --git a/src/modules/effect-coverflow/effect-coverflow.mjs b/src/modules/effect-coverflow/effect-coverflow.mjs
@@ -1,7 +1,7 @@
 import createShadow from '../../shared/create-shadow.mjs';
 import effectInit from '../../shared/effect-init.mjs';
 import effectTarget from '../../shared/effect-target.mjs';
-import { getSlideTransformEl } from '../../shared/utils.mjs';
+import { getRotateFix, getSlideTransformEl } from '../../shared/utils.mjs';
 
 export default function EffectCoverflow({ swiper, extendParams, on }) {
   extendParams({
@@ -23,6 +23,7 @@ export default function EffectCoverflow({ swiper, extendParams, on }) {
     const center = isHorizontal ? -transform + swiperWidth / 2 : -transform + swiperHeight / 2;
     const rotate = isHorizontal ? params.rotate : -params.rotate;
     const translate = params.depth;
+    const r = getRotateFix(swiper);
     // Each slide offset from center
     for (let i = 0, length = slides.length; i < length; i += 1) {
       const slideEl = slides[i];
@@ -57,15 +58,9 @@ 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.need3dFix) {
-        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 slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px)  rotateX(${r(
+        rotateX,
+      )}deg) rotateY(${r(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
@@ -2,7 +2,7 @@ import createShadow from '../../shared/create-shadow.mjs';
 import effectInit from '../../shared/effect-init.mjs';
 import effectTarget from '../../shared/effect-target.mjs';
 import effectVirtualTransitionEnd from '../../shared/effect-virtual-transition-end.mjs';
-import { getSlideTransformEl } from '../../shared/utils.mjs';
+import { getRotateFix, getSlideTransformEl } from '../../shared/utils.mjs';
 
 export default function EffectCreative({ swiper, extendParams, on }) {
   extendParams({
@@ -37,6 +37,7 @@ export default function EffectCreative({ swiper, extendParams, on }) {
     const { progressMultiplier: multiplier } = params;
 
     const isCenteredSlides = swiper.params.centeredSlides;
+    const rotateFix = getRotateFix(swiper);
 
     if (isCenteredSlides) {
       const margin = slidesSizesGrid[0] / 2 - swiper.params.slidesOffsetBefore || 0;
@@ -89,16 +90,15 @@ export default function EffectCreative({ swiper, extendParams, on }) {
       // set rotates
       r.forEach((value, index) => {
         let val = data.rotate[index] * Math.abs(progress * multiplier);
-        if (swiper.browser && swiper.browser.need3dFix && (Math.abs(val) / 90) % 2 === 1) {
-          val += 0.001;
-        }
         r[index] = val;
       });
 
       slideEl.style.zIndex = -Math.abs(Math.round(slideProgress)) + slides.length;
 
       const translateString = t.join(', ');
-      const rotateString = `rotateX(${r[0]}deg) rotateY(${r[1]}deg) rotateZ(${r[2]}deg)`;
+      const rotateString = `rotateX(${rotateFix(r[0])}deg) rotateY(${rotateFix(
+        r[1],
+      )}deg) rotateZ(${rotateFix(r[2])}deg)`;
       const scaleString =
         originalProgress < 0
           ? `scale(${1 + (1 - data.scale) * originalProgress * multiplier})`

diff --git a/src/modules/effect-cube/effect-cube.mjs b/src/modules/effect-cube/effect-cube.mjs
@@ -1,5 +1,5 @@
 import effectInit from '../../shared/effect-init.mjs';
-import { createElement } from '../../shared/utils.mjs';
+import { createElement, getRotateFix } from '../../shared/utils.mjs';
 
 export default function EffectCube({ swiper, extendParams, on }) {
   extendParams({
@@ -58,6 +58,7 @@ export default function EffectCube({ swiper, extendParams, on }) {
       size: swiperSize,
       browser,
     } = swiper;
+    const r = getRotateFix(swiper);
     const params = swiper.params.cubeEffect;
     const isHorizontal = swiper.isHorizontal();
     const isVirtual = swiper.virtual && swiper.params.virtual.enabled;
@@ -118,19 +119,12 @@ export default function EffectCube({ swiper, extendParams, on }) {
         tx = 0;
       }
 
-      const transform = `rotateX(${isHorizontal ? 0 : -slideAngle}deg) rotateY(${
-        isHorizontal ? slideAngle : 0
-      }deg) translate3d(${tx}px, ${ty}px, ${tz}px)`;
+      const transform = `rotateX(${r(isHorizontal ? 0 : -slideAngle)}deg) rotateY(${r(
+        isHorizontal ? slideAngle : 0,
+      )}deg) translate3d(${tx}px, ${ty}px, ${tz}px)`;
       if (progress <= 1 && progress > -1) {
         wrapperRotate = slideIndex * 90 + progress * 90;
         if (rtl) wrapperRotate = -slideIndex * 90 - progress * 90;
-        if (
-          swiper.browser &&
-          swiper.browser.need3dFix &&
-          (Math.abs(wrapperRotate) / 90) % 2 === 1
-        ) {
-          wrapperRotate += 0.001;
-        }
       }
       slideEl.style.transform = transform;
       if (params.slideShadows) {
@@ -161,9 +155,9 @@ export default function EffectCube({ swiper, extendParams, on }) {
     }
     const zFactor =
       (browser.isSafari || browser.isWebView) && browser.needPerspectiveFix ? -swiperSize / 2 : 0;
-    wrapperEl.style.transform = `translate3d(0px,0,${zFactor}px) rotateX(${
-      swiper.isHorizontal() ? 0 : wrapperRotate
-    }deg) rotateY(${swiper.isHorizontal() ? -wrapperRotate : 0}deg)`;
+    wrapperEl.style.transform = `translate3d(0px,0,${zFactor}px) rotateX(${r(
+      swiper.isHorizontal() ? 0 : wrapperRotate,
+    )}deg) rotateY(${r(swiper.isHorizontal() ? -wrapperRotate : 0)}deg)`;
 
     wrapperEl.style.setProperty('--swiper-cube-translate-z', `${zFactor}px`);
   };

diff --git a/src/modules/effect-flip/effect-flip.mjs b/src/modules/effect-flip/effect-flip.mjs
@@ -2,7 +2,7 @@ import createShadow from '../../shared/create-shadow.mjs';
 import effectInit from '../../shared/effect-init.mjs';
 import effectTarget from '../../shared/effect-target.mjs';
 import effectVirtualTransitionEnd from '../../shared/effect-virtual-transition-end.mjs';
-import { getSlideTransformEl } from '../../shared/utils.mjs';
+import { getRotateFix, getSlideTransformEl } from '../../shared/utils.mjs';
 
 export default function EffectFlip({ swiper, extendParams, on }) {
   extendParams({
@@ -44,6 +44,7 @@ export default function EffectFlip({ swiper, extendParams, on }) {
   const setTranslate = () => {
     const { slides, rtlTranslate: rtl } = swiper;
     const params = swiper.params.flipEffect;
+    const rotateFix = getRotateFix(swiper);
     for (let i = 0; i < slides.length; i += 1) {
       const slideEl = slides[i];
       let progress = slideEl.progress;
@@ -65,21 +66,14 @@ export default function EffectFlip({ swiper, extendParams, on }) {
         rotateY = -rotateY;
       }
 
-      if (swiper.browser && swiper.browser.need3dFix) {
-        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) {
         createSlideShadows(slideEl, progress, params);
       }
-      const transform = `translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+      const transform = `translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateFix(
+        rotateX,
+      )}deg) rotateY(${rotateFix(rotateY)}deg)`;
       const targetEl = effectTarget(params, slideEl);
       targetEl.style.transform = transform;
     }

diff --git a/src/shared/utils.mjs b/src/shared/utils.mjs
@@ -319,6 +319,14 @@ function elementOuterSize(el, size, includeMargins) {
 function makeElementsArray(el) {
   return (Array.isArray(el) ? el : [el]).filter((e) => !!e);
 }
+function getRotateFix(swiper) {
+  return (v) => {
+    if (Math.abs(v) > 0 && swiper.browser && swiper.browser.need3dFix && Math.abs(v) % 90 === 0) {
+      return v + 0.001;
+    }
+    return v;
+  };
+}
 export {
   animateCSSModeScroll,
   deleteProps,
@@ -344,4 +352,5 @@ export {
   elementTransitionEnd,
   elementOuterSize,
   makeElementsArray,
+  getRotateFix,
 };