Carousel getting inline style `transform: translate3d(50%, 0px, 0px)` automatically, which is causing positioning issues - Githubissues

davidjerleke / embla-carousel

A lightweight carousel library with fluid motion and great swipe precision.

https://www.embla-carousel.com

MIT License

6.02k stars 180 forks source link

Carousel getting inline style `transform: translate3d(50%, 0px, 0px)` automatically, which is causing positioning issues #382

Closed harshvardhan1000 closed 1 year ago

harshvardhan1000 commented 1 year ago

Bug is related to

[ ] embla-carousel (core package)
[x] embla-carousel-react
[ ] embla-carousel-vue
[ ] embla-carousel-svelte
[ ] embla-carousel-autoplay
[ ] embla-carousel-auto-height
[ ] embla-carousel-class-names
[ ] embla-carousel-docs (documentation website)

Embla Carousel version

v4.5.3

Describe the bug

Something is causing this style to get applied automatically to the parent container of the slides. If anything, the style should be transform: translate3d(0px, 0px, 0px) so that content is placed correctly, i.e aligned to the start of parent container. On resizing the window, the style is recalculated to transform: translate3d(0px, 0px, 0px), which then positions the carousel correctly.

Expected behavior

The style should be transform: translate3d(0px, 0px, 0px) so that content is placed correctly, i.e, aligned to the start of parent container.

Additional context

Screencast from 11-10-22 07:15:52 PM IST.webm

Add any other context about the problem here, like screenshots or similar.

harshvardhan1000 commented 1 year ago

I was able to find a fix in this comment by @davidjerleke

davidjerleke commented 1 year ago

@harshvardhan1000 closing this issue as resolved then?