Reactstrap: Flicker noted on carousel implementation

[PSPanesar]

• 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

[TheSharpieOne]

I have noticed this as well, randomly. I tossed a break on attribute modification to catch the classes being added and removed and found that at a certain point, sometimes no item is .active. At least one items needs active so that the item takes up space within the carousel; pushing other content down,
I'll look into why this is happening.
Here is a screenshot of the issue:

[PSPanesar]

Hi,
Thanks for looking at this. If you have a couple of carousels on your page then this bug occurs much more commonly and causes the page to flash with content below the carousel which jumps up and back down instantly. When you described what was happening that made sense with what I'm seeing.
Thanks

[dkendrick]

Hey,

We are also experiencing a similar issue with the Carousel. We haven't been able to identify the cause but it seems that at almost random times when you are clicking through the carousel it will flicker and the scroll position reverts to the top of the section.

We have tried 5.0.0.alpha.3 and 5.0.0.alpha.4

Thanks

[stevenrobijns]

@TheSharpieOne is there any update? Is there any progress or idea how to fix this & do we have an idea when approx. this will be fixed? (I'm asking so we can inform our customers). Thanks

[PSPanesar]

HI all,
Yes really keen to see a fix to this so we can add carousel features to our company website.
Thanks.

[stevenrobijns]

I forgot to mention, but on mobile, the carousel disappears after a while. I see it can be triggered when sliding to the next image. Carousel then disappears to re-appear later on and disappear again and so on.
I think it might be related to this issue?
(tested on: iphone 6 safari portrait mode iOS 11.1.2)

[PSPanesar]

Hi all, just wanted to check in and see if anyone has time to work on this big? Thanks. Bw.

[tcaselli]

Hey ! This flicker problem is still there with 5.0.0-beta , is it planned to fix it soon ? Thanks

[sanbeaman]

Any new on this?
@TheSharpieOne observation is exactly what i'm seeing.

Current Setup:
React 16.2
Bootstrap 4
reactstrap: 5.0.0-beta

Seems Random, however, I'm noticing it more when viewing in Safari then chrome (not sure it helps)

[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);
}

[joshuaryoung]

Also experiencing this

[safwat-fathi]

I had the same issue but i noticed if i gave the section/div position: relative it flicks and if omitted this rule, it solves the issue.

[Rajeev23]

I tried all the steps mention above. But not working. What is the solution for this?

[michaeldever]

Fixing the height of .carousel-inner worked for me, but doesn't feel like the right approach.

[imteyazashraf]

This code worked for me.Taken from some blog.This is not permanent solution but can be used for resolution.
.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;
}

[anisayari]

 <CarouselItem
    className={styles.carouselInner}
    onExiting={() => setAnimating(true)}
    onExited={() => setAnimating(false)}
    key={item.name}
            >

And

.carouselInner{
    height: 100% !important;
    position:relative;
}

Did the trick for me :) .