Swiper: Carousel items getting blurry after clicking prev/next arrow (Has demo)

Created on 29 Jan 2021 · 5Comments · Source: nolimits4web/swiper

Swiper Version: 6.4.9 (latest)
Platform: Mac OS Catelina Version 10.15.6 (19G2021)
Browser Versions: Goole Chrome Version 88.0.4324.96 (Official Build) (x86_64)

I'm facing an issue which the carousel item are getting blurry after clicking prev/next arrows. It happened where the carousel items are more than 100++, it will getting more blurry if your items are more and more.

Example/Demo: https://codepen.io/kchkch/pen/OJbJbem

Source

KongCheeHong

👍1

Most helpful comment

I was able to remove the problem by adding this hack to my global styles.

.swiper-slide {
  -webkit-backface-visibility: hidden;
}

Lame :/

opiepj on 10 Feb 2021

👍5

All 5 comments

Me too.
As you add new images to the carousel, the transition becomes increasingly blurred.

andrea3aga on 8 Feb 2021

Same issue with me. Seems to only be happening on Chrome. I used "roundLengths", but doesn't work.

opiepj on 10 Feb 2021

I was able to remove the problem by adding this hack to my global styles.

.swiper-slide {
  -webkit-backface-visibility: hidden;
}

Lame :/

opiepj on 10 Feb 2021

👍5

@opiepj i had the same issue and your fix worked! I had this issue with the swiper-react version too. il try and submit a PR if i have some time but this is a good workaround for now :)