Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
5 of 15 tasks
DBulinski opened this issue Jun 7, 2024 · 2 comments
Open
5 of 15 tasks
Assignees
Labels
bug Something isn't working

Comments

@DBulinski
Copy link

DBulinski commented Jun 7, 2024

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
@DBulinski DBulinski added the bug Something isn't working label Jun 7, 2024
@sarussss
Copy link
Contributor

sarussss commented Jun 7, 2024

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

@davidjerleke
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants