Flicker noted on carousel implementation

• components: Carousel
• reactstrap version 5.0.0.alpha.3
• react version #16
• bootstrap version #4.0.0.beta2

Hi,

I’ve implemented reactstrap (which is a great tool!) in my app. I’ve added a carousel at the top of my home page. It cycles 4 images with captions. I’m using the latest react. I’ve noted a flicker on my page when using the carousel. It happens every now and again and the viewable page seems to flicker/flash once for a less than a second and then everything back to normal. The flicker/flash seems to show the contents of the page below the carousel but its really hard to tell.

I’ve tried everything I can think of to correct that. I’ve even use will-change: transform css property to prepare the browser for performance. Nothing has worked.

I wonder if its an issue with react v16 or if theres an issue with using the alpha version of reactstrap. That said I can’t seem to correct the issue.

Would really appreciate some help on resolving this issue. Thank you all.

Thanks

[david-j-lee]

Expanding on @TheSharpieOne findings. A dirty fix for me was to just put a set height to .carousel-inner. This only works if your carousel does not require dynamic heights.

[havgry]

@david-j-lee In continuation of your workaround I just wanted to point out that it works with dynamic height as well (granted you’re already setting the height of the carousel). I did it like this:

JS

onEntering = ({ clientHeight }) => {
  this.setState({ carouselHeight: clientHeight })
}

onEntering is passed to the CarouselItem component, and carouselHeight is applied inline to the .carousel-wrapper.

SCSS

.carousel,
.carousel-inner {
  height: 100%;
}

.carousel-wrapper {
  // Replace transition-property from carousel transition variable
  transition: set-nth($carousel-transition, 1, height);
}