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

[DBulinski]

Which variants of Embla Carousel are you using?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

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()

Screen.Recording.2024-06-07.at.08.50.36.mov

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

• I've made research efforts and searched the documentation
• I've searched for existing issues
• I agree to follow this project's Contributing Guidelines for bug reports

[sarussss]

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

[davidjerleke]

@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:

• Make reading element dimensions work regardless of transforms #633

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

[m0xAy]

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]

Hi @m0xAy,

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