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

[kyletsang]

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

[ccoulter-eaglemed]

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.