Slide not properly centered on a modal viewport in reactjs

[dexter4life]

Bug is related to

• [ ] embla-carousel (core package)
• [ ] embla-carousel-react

Embla Carousel version

• v7.0.3

Describe the bug

translate3d showing a value less than the size of the viewport. assuming the viewport size is 440px, it appears the translate3d is at 389px 0 0 instead and because of this is not perfectly centered.

• A clear and concise description of what the bug is.

Steps to reproduce

Create a modal in react and make embla-carousel a child component of this modal

Expected behavior

Each slide is expected to be perfectly center, it does work when not in modal but doesn't center perfectly when it is on the modal.

[davidjerleke]

Hi @dexter4life,

Thanks for your question. Please read this comment and see if any of the two proposed solutions there solves your problem.

Best, David

[dexter4life]

I think I found the problem

on this file Engine.ts

Is using getBoundingClientRect() which produce a different value, but when I use getComputedStyle and replace the width the whole flow became normalized.

[dexter4life]

My solution is this

[davidjerleke]

Hi @dexter4life,

Please take time to read the comment I linked to in my previous comment.

You didn’t find a solution to a problem. Thousands of users use Embla. Trust me, if this was a bug it would have been found a long time ago.

[dexter4life]

ok