FormidableLabs / nuka-carousel

Small, fast, and accessibility-first React carousel library with an easily customizable UI and behavior to fit your brand and site.
https://commerce.nearform.com/open-source/nuka-carousel
Other
3.07k stars 595 forks source link

Bug with React 18, (infinity, cellSpacing, flicker) #879

Closed daxamayac closed 2 years ago

daxamayac commented 2 years ago

Bugs and Questions

Prerequisites

Describe Your Environment

Describe the Problem

Multiple Problems

  1. Infinity mode: the carousel goes blank after a while, (work if remove in _app)
  2. When remove work infinity mode, but there is a flicker in the transition.
  3. cellSpacing: create double row (click in prev button)

Sandbox: https://codesandbox.io/s/nuka-carousel-react-18-3oelyx

Expected behavior: infinity mode without flicker and with cellSpacing Actual behavior: infinity mode no work, flicker in transition, and cellSpacing crete double row

vmjaramillo1 commented 2 years ago

I also have the same problem, after updating my project to react 18 the carousel started to fail with Infinity mode and show white sliders

ValGeorgiev commented 2 years ago

Hey @daxamayac, thanks for raising this with us. I am able to reproduce the bugs with the StrictMode. I will try to ship a fix asap.

ValGeorgiev commented 2 years ago

I found the root cause of this issue. it's caused by React new behaviour under StrictMode. React will unmount and remount the component. This should be fixed now with v5.0.11.

About the cellSpacing property. We really consider removing this property, cause sounds useless. If developer want cell spacing, they can easily wrap their image (for example) in a div with padding: 0 50px. We are doing the same thing, here is a sandbox example . I cannot reproduce the issue with cellSpacing locally. Here is an example with Next.js and cellSpacing link.

About the flickering, can you collaborate more. Recorded video will do the job. Thank you.

daxamayac commented 2 years ago

Hi...

All problems are resolved.

Thanks..