feat: new maxBackfaceHiddenSlides param to prevent flicker in Safari

nolimits4web · Jan 28, 2022 · 8c05e6d · 8c05e6d
1 parent ae77d46
commit 8c05e6d
Show file tree

Hide file tree

Showing 13 changed files with 36 additions and 2 deletions.
diff --git a/src/angular/src/swiper.component.ts b/src/angular/src/swiper.component.ts
@@ -80,6 +80,7 @@ export class SwiperComponent implements OnInit {
   @Input() breakpoints: SwiperOptions['breakpoints'];
   @Input() spaceBetween: SwiperOptions['spaceBetween'];
   @Input() slidesPerView: SwiperOptions['slidesPerView'];
+  @Input() maxBackfaceHiddenSlides: SwiperOptions['maxBackfaceHiddenSlides'];
   @Input() grid: SwiperOptions['grid'];
   @Input() slidesPerGroup: SwiperOptions['slidesPerGroup'];
   @Input() slidesPerGroupSkip: SwiperOptions['slidesPerGroupSkip'];

diff --git a/src/angular/src/utils/params-list.ts b/src/angular/src/utils/params-list.ts
@@ -26,6 +26,7 @@ export const paramsList = [
   'breakpoints',
   '_spaceBetween',
   '_slidesPerView',
+  'maxBackfaceHiddenSlides',
   '_grid',
   '_slidesPerGroup',
   '_slidesPerGroupSkip',

diff --git a/src/core/core.less b/src/core/core.less
@@ -53,7 +53,10 @@
   align-items: flex-start;
   transition-property: transform, height;
 }
-
+.swiper-backface-hidden .swiper-slide {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+}
 /* 3D Effects */
 .swiper-3d {
   &,

diff --git a/src/core/core.scss b/src/core/core.scss
@@ -55,7 +55,10 @@
     transition-property: transform, height;
   }
 }
-
+.swiper-backface-hidden .swiper-slide {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+}
 /* 3D Effects */
 .swiper-3d {
   &,

diff --git a/src/core/defaults.js b/src/core/defaults.js
@@ -121,6 +121,8 @@ export default {
   // Passive Listeners
   passiveListeners: true,
 
+  maxBackfaceHiddenSlides: 10,
+
   // NS
   containerModifierClass: 'swiper-', // NEW
   slideClass: 'swiper-slide',

diff --git a/src/core/update/updateSlides.js b/src/core/update/updateSlides.js
@@ -289,4 +289,12 @@ export default function updateSlides() {
   if (params.watchSlidesProgress) {
     swiper.updateSlidesOffset();
   }
+
+  if (!isVirtual && !params.cssMode && (params.effect === 'slide' || params.effect === 'fade')) {
+    if (slidesLength <= params.maxBackfaceHiddenSlides) {
+      swiper.$el.addClass(`${params.containerModifierClass}backface-hidden`);
+    } else {
+      swiper.$el.removeClass(`${params.containerModifierClass}backface-hidden`);
+    }
+  }
 }
diff --git a/src/modules/virtual/virtual.less b/src/modules/virtual/virtual.less
@@ -1,3 +1,7 @@
+.swiper-virtual .swiper-slide {
+  -webkit-backface-visibility: hidden;
+  transform: translateZ(0);
+}
 .swiper-virtual.swiper-css-mode {
   .swiper-wrapper::after {
     content: '';

diff --git a/src/modules/virtual/virtual.scss b/src/modules/virtual/virtual.scss
@@ -1,3 +1,7 @@
+.swiper-virtual .swiper-slide {
+  -webkit-backface-visibility: hidden;
+  transform: translateZ(0);
+}
 .swiper-virtual.swiper-css-mode {
   .swiper-wrapper::after {
     content: '';

diff --git a/src/react/params-list.js b/src/react/params-list.js
@@ -27,6 +27,7 @@ const paramsList = [
   'breakpoints',
   '_spaceBetween',
   '_slidesPerView',
+  'maxBackfaceHiddenSlides',
   '_grid',
   '_slidesPerGroup',
   '_slidesPerGroupSkip',

diff --git a/src/svelte/params-list.js b/src/svelte/params-list.js
@@ -27,6 +27,7 @@ const paramsList = [
   'breakpoints',
   '_spaceBetween',
   '_slidesPerView',
+  'maxBackfaceHiddenSlides',
   '_grid',
   '_slidesPerGroup',
   '_slidesPerGroupSkip',

diff --git a/src/vue/params-list.js b/src/vue/params-list.js
@@ -27,6 +27,7 @@ const paramsList = [
   'breakpoints',
   '_spaceBetween',
   '_slidesPerView',
+  'maxBackfaceHiddenSlides',
   '_grid',
   '_slidesPerGroup',
   '_slidesPerGroupSkip',

diff --git a/src/vue/swiper-vue.d.ts b/src/vue/swiper-vue.d.ts
@@ -115,6 +115,10 @@ declare const Swiper: DefineComponent<
       type: PropType<SwiperOptions['slidesPerView']>;
       default: undefined;
     };
+    maxBackfaceHiddenSlides: {
+      type: NumberConstructor;
+      default: undefined;
+    };
     slidesPerGroup: {
       type: NumberConstructor;
       default: undefined;

diff --git a/src/vue/swiper.js b/src/vue/swiper.js
@@ -50,6 +50,7 @@ const Swiper = {
     breakpoints: { type: Object, default: undefined },
     spaceBetween: { type: Number, default: undefined },
     slidesPerView: { type: [Number, String], default: undefined },
+    maxBackfaceHiddenSlides: { type: Number, default: undefined },
     slidesPerGroup: { type: Number, default: undefined },
     slidesPerGroupSkip: { type: Number, default: undefined },
     slidesPerGroupAuto: { type: Boolean, default: undefined },