[Bug]: Jitter on resize when not on first image

[vincvdwal]

Which variants of Embla Carousel are you using?

• [X] embla-carousel (Core)
• [ ] embla-carousel-react
• [X] 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

• Initialize a embla-carousel with more then 2 images
• Go to > 2nd image
• Resize window jitter.webm

Expected Behavior

On resizing the window, the carousel image should resize smoothly

Additional Context

Apparently, the first image resizes perfectly, only occurs from the second image onwards

What browsers are you seeing the problem on?

Firefox, Chrome, Safari

Version

v8.1.4

CodeSandbox

No response

Before submitting

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

[davidjerleke]

@vincvdwal this is because Embla doesn’t know the carousel container element size beforehand when it changes. It needs to get the new dimensions after a resize and adjust its position based on the new dimensions. That’s why it takes a very brief moment before it positions itself correctly.

You don’t resize the window slowly when using a real world application (at least if you’re not a developer). Most visitors will never even trigger a resize. If they do, it’s probably when they change orientation on a tablet or mobile which will trigger a single resize. And in these cases, it won’t be a problem and it’s negligible.