Carousel flashes on transition

Describe the bug

I recently upgraded my version in a production site from 1.0.0-beta-14 to 1.0.0 and noticed this bug appearing. I have a fairly standard <Carousel/> transitioning between 4 images and at the moment of transition, it flashes jarringly.

Originally I thought it was just present when fade prop is set to true but on my minimal example below it occurs even without any fade prop. When fade is on however, I can see the preceding image immediately disappears (no opacity transition), but the succeeding image does fade in with a smooth opacity change as expected.

I don’t have time to go back through each version to find out when exactly it appeared, sorry. But I have reverted back to beta-14 and the bug is resolved so it was introduced sometime between then and 1.0.0.

Reproducible Example

Minimal example by using CodeSandbox.

Screen Recording

Gyazo GIF

Environment

Operating System: MacOS
Browser: Safari 13.0 & Firefox Developer Edition 76.0b5
React-Bootstrap Version: 1.0.0

Issue Analytics

State:
Created 3 years ago
Comments:8 (2 by maintainers)

Top GitHub Comments

2reactions

kyletsangcommented, Jun 28, 2021

@randima-s use react-bootstrap v2 beta for bootstrap 5. 1.6.1 is meant for bootstrap 4 only.

2reactions

ccoulter-eaglemedcommented, Feb 19, 2021

This is how I fixed it:

/* Fix for flickering carousel */                                                      
.carousel-inner .carousel-item {
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  position: absolute;
}
.carousel-inner .carousel-item:first-of-type {
  position: relative;
}
.carousel-inner .active {
  opacity: 1;
}
/* End of fix */

I don’t remember where I found the code but it works! lol Hope that helps.

Top Results From Across the Web

Bootstrap carousel flicker after content change - Stack Overflow

this is working properly because carousel grows and shrinks when browser window resizes, but has a flicker effect after every transition ...

Slick carousel animation blinking after the last slide / cloned ...

One way to avoid the bug animation at the end of infinite rotation transition ... It will let the slide move into the...

1432711 - Bootstrap carousel has white spaces between photos

During images transition, there's some kind of white layer. ... Latterly, the white flash between carousel items stopped after the first pass-through of...

Slideshow website flickers in Chrome - WOWSlider.com

Q: I just generated a very nice slideshow, except some of the images have a quick FLASH of white before the following slide...

Fix Owl Carousel flickering on Webkit based browsers - Plugins

If you experience flickering during slide transitions on Webkit based browsers like e.g. Apple Safari, you can fix it with this CSS snippet: ......