Slider container init with negative value on mobile

[AhmedAbdulrahman]

Bug is related to

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

Embla Carousel version

• ^6.1.1

Describe the bug

• When I open pages mentioned below on Mobile, the slider gets negative translate3

CodeSandbox

• https://codesandbox.io/s/snowy-meadow-168ddu

Steps to reproduce

1. Go to (https://codesandbox.io/s/snowy-meadow-168ddu)
2. Check product list with class products-list__main slider in index.html, brand-campaign.html
3. Open the pages in Mobile (Safari) (might need some refreshes to reproduce it)
4. See the bug

https://user-images.githubusercontent.com/10485129/167104136-cebb74df-8c86-46a1-b94c-4b64b4aea315.mp4

Expected behavior

• It should reset the slider translate3d to 0,0,0

Additional context

• Broswer: Safari
• Device: iPhone 12, iPhone12Pro

[davidjerleke]

Hi @AhmedAbdulrahman,

Thank you for the CodeSandbox. Unfortunately, I couldn't reproduce the problem. But this might be happening because you're animating the slides when they're scrolled into view. Now that's not a problem per se, but if you do it while Embla Carousel is mounting and reading the slide rects (in order to calculate the scroll positions), the slide positions will be altered while the slides are animating.

Could you try initialising Embla before you animate the slides?

Best, David

[AhmedAbdulrahman]

I think I am able only to reInit the slider here:

export function carousels() {
  emblaCarousels.forEach((emblaCarousel) => {
    const emblaNodes = querySelectorAllToArray(emblaCarousel.container)

    if (emblaNodes.length > 0) {
      emblaNodes.forEach((emblaNode) => {
        const embla = createEmblaCarousel(emblaNode, emblaCarousel)
        console.log('here', embla)

        embla.reInit({
          align: 'start',
          containScroll: 'trimSnaps',
          slidesToScroll: 2,
          skipSnaps: false,
          dragFree: true,
        })
      })
    }
  })
}

That animation is a custom lib called aos. Do you have any suggestion where to reInit it? also I notice that sometimes I get this wired behavior when I scrolled to that section and then refresh a few times, and when you land on page then scroll it works and sometimes does not work!

@davidjerleke

[davidjerleke]

@AhmedAbdulrahman since you're only animating once, I don't think you need to reInit the carousels at all. I guess you could just move the aos library init function below the carousel init function like so:

carousels() // <-- init carousels first

AOS.init({ // <-- run AOS after
  once: true,
  duration: 1200,
})

[davidjerleke]

@AhmedAbdulrahman please let me know when you’ve had the chance to try my suggestion and if it solves the problem.