Scoll Snaps get out of sync with looping and the wheel gestures plugin

[nicholasengleman]

Bug is related to

• [ ] embla-carousel (core package)
• [x] embla-carousel-react
• [ ] embla-carousel-vue
• [ ] embla-carousel-svelte
• [ ] embla-carousel-autoplay
• [x] embla-carousel-wheel-gestures
• [ ] embla-carousel-auto-height
• [ ] embla-carousel-class-names
• [ ] embla-carousel-docs (documentation website)

Embla Carousel version

• v8.0.0-rc07 of embla-carousel-react and 8.0.0-rc04 of Wheel Gestures plugin

Describe the bug

• When using looping and the wheel gestures plugin, the scroll snaps seem to get out sync after going through half the gallery and not match the slides. As a result if using the default option of align: center, the selected slide stops being centered. This issue is not present if looping is not used or if the trackpad/wheel gestures plugin is not used.

Not sure if this is an issue with the carousel or with the wheel gestures plugin

CodeSandbox

• I wasn't able to replicate this in codesandbox because the 8.0.0-rc04 of the Wheel Gestures plugin isn't available there.

Steps to reproduce

1. Create a gallery with 15 slides that are variable widths and this configuration: const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, skipSnaps: true }, [WheelGesturesPlugin()]);

Expected behavior

• The selected slide stays centered when using the track pad to scroll the gallery.

Additional context

[davidjerleke]

@nicholasengleman did you solve this somehow? It's good to know if someone else runs into this problem.

[nicholasengleman]

@davidjerleke Yes the fix was to set overflow-x: hidden; on the embla__viewport element.