Carousel flickering during animation

[poszetkristof]

Hello Swiper Team,

I've encountered a flickering issue when navigating between slides that differ in their need for a vertical scrollbar. Specifically, transitioning from a slide without a scrollbar to one that requires it causes the carousel to flicker during the swipe animation.
I'm using EffectCreative module.

Possible Cause:
It appears that using a highly precise scale factor (e.g., 0.8103489830508474) might be contributing to sub-pixel rendering issues. Adjusting the scale to a simpler value like 0.81 resolves the flickering.

Steps to Reproduce:

1. Ensure there is no vertical scroll on the carousel page by adjusting the browser size.
2. Navigate from a slide without a scrollbar to another that requires one.

Example Code:

  // ...
  const [controlledSwiper, setControlledSwiper] = useState(
    null
  );
 const [slides, setSlides] = useState(
    Array.from({ length: 500 }).map((_, index) => `Slide ${index + 1}`)
  );
 // ...
<Swiper
  modules={[Keyboard, EffectCreative, Navigation, Pagination]}
  centeredSlides
  slidesPerView="auto"
  slideToClickedSlide
  spaceBetween="16px"
  effect="creative"
  creativeEffect={{
    prev: {
      translate: ["-100%", 0, 0],
      scale: 0.8103489830508474,
      origin: "70% center",
    },
    next: {
      translate: ["100%", 0, 0],
      scale: 0.8103489830508474,
      origin: "30% center",
    },
    limitProgress: 2,
  }}
  onSwiper={setControlledSwiper}
>
  {slides.map((slideContent) => (
    <SwiperSlide key={slideContent} role="group">
      {slideContent}
    </SwiperSlide>
  ))}
</Swiper>

#root {
  height: 100%;
}
html, body {
  position: relative;
  height: 100%;
}
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}
.swiper {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper {
  width: 100%;
  height: 300px;
  margin: 20px auto;
}
.swiper-slide:nth-child(2n) {
  height: 800px !important; // just to reproduce the issue
}
.append-buttons {
  text-align: center;
  margin-top: 20px;
}
.append-buttons button {
  display: inline-block;
  cursor: pointer;
  border: 1px solid #007aff;
  color: #007aff;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 4px;
  margin: 0 10px;
  font-size: 13px;
}

swiper_issue.mp4

Useful link for CSS sub-pixel rendering issue: https://medium.com/kajabi-ux/css-and-sub-pixel-rendering-the-case-of-the-clipped-border-4652c5a1b5ab

Would appreciate any insights for this issue. Is this a known problem, or something new we should be aware of?

Thank you!