fix: Safari 3D fix for webview

fixes #7167
nolimits4web · Feb 5, 2024 · d42ce05 · d42ce05 · deniss-ee · Feb 13, 2024
1 parent b67edaa
commit d42ce05
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 6 deletions.
diff --git a/src/modules/effect-coverflow/effect-coverflow.mjs b/src/modules/effect-coverflow/effect-coverflow.mjs
@@ -57,7 +57,7 @@ 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 (swiper.browser && swiper.browser.need3dFix) {
         if ((Math.abs(rotateY) / 90) % 2 === 1) {
           rotateY += 0.001;
         }

diff --git a/src/modules/effect-creative/effect-creative.mjs b/src/modules/effect-creative/effect-creative.mjs
@@ -89,7 +89,7 @@ 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.isSafari && (Math.abs(val) / 90) % 2 === 1) {
+        if (swiper.browser && swiper.browser.need3dFix && (Math.abs(val) / 90) % 2 === 1) {
           val += 0.001;
         }
         r[index] = val;

diff --git a/src/modules/effect-cube/effect-cube.mjs b/src/modules/effect-cube/effect-cube.mjs
@@ -124,7 +124,11 @@ 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) {
+        if (
+          swiper.browser &&
+          swiper.browser.need3dFix &&
+          (Math.abs(wrapperRotate) / 90) % 2 === 1
+        ) {
           wrapperRotate += 0.001;
         }
       }

diff --git a/src/modules/effect-flip/effect-flip.mjs b/src/modules/effect-flip/effect-flip.mjs
@@ -65,7 +65,7 @@ export default function EffectFlip({ swiper, extendParams, on }) {
         rotateY = -rotateY;
       }
 
-      if (swiper.browser && swiper.browser.isSafari) {
+      if (swiper.browser && swiper.browser.need3dFix) {
         if ((Math.abs(rotateY) / 90) % 2 === 1) {
           rotateY += 0.001;
         }

diff --git a/src/shared/get-browser.mjs b/src/shared/get-browser.mjs
@@ -1,9 +1,11 @@
 import { getWindow } from 'ssr-window';
+import { getDevice } from './get-device.mjs';
 
 let browser;
 
 function calcBrowser() {
   const window = getWindow();
+  const device = getDevice();
   let needPerspectiveFix = false;
   function isSafari() {
     const ua = window.navigator.userAgent.toLowerCase();
@@ -20,10 +22,15 @@ function calcBrowser() {
       needPerspectiveFix = major < 16 || (major === 16 && minor < 2);
     }
   }
+  const isWebView = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(window.navigator.userAgent);
+  const isSafariBrowser = isSafari();
+  const need3dFix = isSafariBrowser || (isWebView && device.ios);
+
   return {
-    isSafari: needPerspectiveFix || isSafari(),
+    isSafari: needPerspectiveFix || isSafariBrowser,
     needPerspectiveFix,
-    isWebView: /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(window.navigator.userAgent),
+    need3dFix,
+    isWebView,
   };
 }