biati-digital / glightbox

Pure Javascript lightbox with mobile support. It can handle images, videos with autoplay, inline content and iframes
MIT License
2.07k stars 228 forks source link

Race condition between transition and interaction causes broken rendering #530

Open Prinzhorn opened 1 month ago

Prinzhorn commented 1 month ago

Thanks for making this library, it was very easy to integrate. However, I immediately ran into the following bug:

Describe the bug

When you hit the "right arrow key" to navigate to the next image while the first image is still in the opening transition, everything falls apart.

Are you able to reproduce the bug in the demo site

Yes

To Reproduce

Steps to reproduce the behavior:

  1. Go to https://biati-digital.github.io/glightbox/
  2. Click on the first image
  3. Instantly "right arrow key" while the image is opening (it is tricky to always repro, see video)

Expected behavior

Either the keyboard navigation is ignored or it transitions to the second image

Screenshots

Screencast from 2024-09-09 10-37-16.webm

Desktop:

Latest Firefox and Chromium on Ubuntu. I don't think this is a browser bug.