diff --git a/src/angular/src/swiper.component.ts b/src/angular/src/swiper.component.ts
index f4d2fdf86..7797f9a9d 100644
--- 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
index 0d58bbaf6..1dfd2c8d3 100644
--- 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
index e7ba37bcc..704d5f2d8 100644
--- 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
index 06706e5c8..24e4a0093 100644
--- 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
index ad38d79d2..84281b8b6 100644
--- 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
index e10cd3522..807ed996b 100644
--- 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
index e209999a1..9e6a11835 100644
--- 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
index e209999a1..9e6a11835 100644
--- 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
index cb82a3ea9..24819953e 100644
--- 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
index feeec7db1..caaec1226 100644
--- 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
index cb82a3ea9..24819953e 100644
--- 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
index f5b72ebb5..59a8182c0 100644
--- 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
index 34aa0a0b0..bd8216baa 100644
--- 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 },