React Transition CSS animation flickering

Question

I need help in preventing my HTML from flickering. I have a component for fade-in-out animation which uses React Transition. Sometimes I see a flickering effect on Chrome. In Safari everything works well. I tried to add -webkit-backface-visibility: hidden; and some more solutions found in Google but everything led me to failure. Do you have any ideas?

Codepen

Video with the flickering effect.

Heiress

You probably haven't gotten much response because your question doesn't meet our standards. Please see stackoverflow.com/help/how-to-ask, then revise to show the relevant code here, in your question post. – Elyse

It's not flickering in my chrome. Try updating the chrome version. – Ferree

Who has the right answer? – Topsyturvy

It's flickering because of re-rendering DOM elements. With class change (re-append) the animation starts again over. Personally I find your state logic a little bit too complex for something like fade effect which is actually achievable with common transitions. – Roseline

Answer 1

If you what it to constantly fade in and out I would put it on a loop. I got into Flickr by constantly clicking the button, that is because when you click it so fast It starts the fade in and fade out and fade in all at the same time. I got it to stop flickering by waiting until it finishes the animation. The reason it works on safari because it will not let two of the same animations run at the same time, what I mean by that is that if fade-in and fade-in were to run at the same time it would not let the last one run but if you ran fade-in and fade-in-2 at the same time you would have the flicker effect in safari.

If you what to fix the problem:

1. If the purpose of the fade in and out is to do one and then the other then tell the code to not start the fade-out animation until the animation fade-in finishes.

2. If the purpose of the fade in and out is to constantly change back and forth then add a loop to the code.

Like this:

animation-iteration-count: infinite;

Add this to your styling.

Topsyturvy