search

banthagroup / fslightbox-react

Basic version of Fullscreen Lightbox for React.js. Website: https://fslightbox.com/react
MIT License
169 stars 23 forks source link

Fade out animation flickering #184

Open grigory-bogush opened 3 years ago

grigory-bogush commented 3 years ago

If one quickly opens and closes the lightbox, sometimes fade out animation will complete but the lightbox container would still show up before disappearing again.

Present on the latest version: 1.6. Happens on Chrome but possibly other browsers.

Possible solution: Use transition instead of animation

AndreiTS commented 2 years ago

Still having this issue in production builds, any news?

grigory-bogush commented 2 years ago

Still having this issue in production builds, any news?

You can fix this by overriding the default css


// Note: replace fade out animaton with a transition as that
// removes flickering

.fslightbox-fade-out-strong {
  animation: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.25s, opacity 0.25s ease;
}