search

davidjerleke / embla-carousel

A lightweight carousel library with fluid motion and great swipe precision.
https://www.embla-carousel.com
MIT License
5.35k stars 163 forks source link

[Bug]: Offset by 1 issue for canScrollNext when tab size has fractional width #899

Open DBulinski opened 2 weeks ago

DBulinski commented 2 weeks ago

Which variants of Embla Carousel are you using?

Steps to reproduce

The bug occurs when I have multiple slides on the page, and slides have some specific fractional width (I've identified so far .5px at the end when the number of slides is even and .62px for 3 slides. But I think there is more.

  1. Open stackblitz
  2. Open carousel in new window
  3. Resize the window, so the slide width is rounded to 0.5px
  4. Watch the indicator below carousel (Can / Cant). It's the return value from api.canScrollNext()

https://github.com/davidjerleke/embla-carousel/assets/84719303/8c37bb1d-b7b2-4079-9d1a-f8c5cad873ce

Expected Behavior

It should finish on the last scroll, and doesn't have offset by 1 issue.

Additional Context

I'm almost sure this is an issue, but would be super grateful if there is something wrong in my code and you can point it. The implementation on stackblitz is a simple copy from https://ui.shadcn.com/docs/components/carousel. If you confirm that this is a bug a can try to fix it, but would need some guidance, what can be an issue :)

What browsers are you seeing the problem on?

Chrome, Safari, Microsoft Edge

Version

v8.1.3

CodeSandbox

https://stackblitz.com/edit/vite-react-tailwind-jhsdqz?file=src%2FApp.jsx

Before submitting

sarussss commented 2 weeks ago

Hi @DBulinski I think it might have something to do with this.

davidjerleke commented 2 weeks ago

@DBulinski thanks for the clear bug report. And thanks @sarussss.

The problem could be related to the transition to reading element offsets instead of client rects:

It could be a matter of increasing the pixel tolerance for the snap calculations. I will look into it when possible.