fix(effects): fix slide shadows flickering in Safari for Cube and Fli…

…p effects
nolimits4web · Apr 20, 2022 · 52f5ef7 · 52f5ef7
1 parent 540a244
commit 52f5ef7
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 1 deletion.
diff --git a/src/modules/effect-cube/effect-cube.js b/src/modules/effect-cube/effect-cube.js
@@ -167,6 +167,7 @@ export default function EffectCube({ swiper, extendParams, on }) {
     on,
     setTranslate,
     setTransition,
+    shouldRecreateShadows: true,
     perspective: () => true,
     overwriteParams: () => ({
       slidesPerView: 1,

diff --git a/src/modules/effect-flip/effect-flip.js b/src/modules/effect-flip/effect-flip.js
@@ -79,6 +79,7 @@ export default function EffectFlip({ swiper, extendParams, on }) {
     on,
     setTranslate,
     setTransition,
+    shouldRecreateShadows: true,
     perspective: () => true,
     overwriteParams: () => ({
       slidesPerView: 1,

diff --git a/src/shared/effect-init.js b/src/shared/effect-init.js
@@ -1,5 +1,14 @@
 export default function effectInit(params) {
-  const { effect, swiper, on, setTranslate, setTransition, overwriteParams, perspective } = params;
+  const {
+    effect,
+    swiper,
+    on,
+    setTranslate,
+    setTransition,
+    overwriteParams,
+    perspective,
+    shouldRecreateShadows,
+  } = params;
 
   on('beforeInit', () => {
     if (swiper.params.effect !== effect) return;
@@ -22,6 +31,21 @@ export default function effectInit(params) {
     setTransition(duration);
   });
 
+  const recreateShadows = () => {
+    swiper.slides.each((slideEl) => {
+      const $slideEl = swiper.$(slideEl);
+      $slideEl
+        .find(
+          '.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left',
+        )
+        .remove();
+    });
+  };
+
+  if (shouldRecreateShadows) {
+    on('transitionEnd', recreateShadows);
+  }
+
   let requireUpdateOnVirtual;
   on('virtualUpdate', () => {
     if (swiper.params.effect !== effect) return;