search

davidjerleke / embla-carousel

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

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

Open DBulinski opened 5 months ago

DBulinski commented 5 months 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 5 months ago

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

davidjerleke commented 5 months 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.

m0xAy commented 2 weeks ago

Just chiming in here to say we're observing the same issue - in our case, we're rendering prev/next buttons based on canScrollNext/canScrollPrev. This issue means that sometimes the 'next' button is still visible on the last slide depending on the size of the container. When resizing the container, you can see the button flickering in and out (same as the CAN/CAN'T example repro).

We're using the align: 'start' setting as we are wanting to achieve the behaviour outlined in this issue.

We're using embla-carousel-react@8.2.1.

davidjerleke commented 2 weeks ago

Hi @m0xAy,

Thanks for your input. This is a confirmed bug. Just haven’t had the chance to solve it yet.