[Help]: scrollSnapList is only returning 'one big slide'

[modulareverything]

Summary

I have a carousel set up which appears in a modal. The modal is using Framer Motion's AnimatePresence, and it's rendered conditionally based on if modalOpen is true or false. My Modal component takes in a children class which is what I'm passing the Embla Carousel through to.

It renders something like this:

<AnimatePresence>
  {modalOpen && (
    <div>{children}</div>
  )}
</AnimatePresence>

It appears that Embla works, but it's miscalculating the amount of slides.

I'm setting it up like this (note I'm using tailwind)

const [emblaRef] = useEmblaCarousel({ axis: "y" });

return (
<Modal>
  <div ref={emblaRef} className="h-[90vh]">
    <div className="flex flex-col">
        {slides.map((slide) => (
            <div key={slide.key} className="relative flex flex-[0_0_90vh]">...content...</div>
        )}
    </div>
  </div>
</Modal>
)

I think it's obvious that Embla isn't able to calculate the sizes of the slides since they're completely hidden until modalOpen is true, but I've tried everything I can think of to get it to work:

1. reInit the slides when the modal is open (does nothing)
2. Conditionally apply the ref ref={modalOpen ? emblaRef : null} also has no effect
3. Replace the whole conditionally rendered modal with one that's always present (still get the same result which makes me think it's a markup thing?)
4. A bunch of other things but I forgot at this point — I'm on hour 3 of trying to work this out

Hopefully it's something super obvious, but I'd really appreciate some input on this!

Thanks :)

If applicable, which variants of Embla Carousel are relevant to this question?

• 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-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

https://codesandbox.io/p/sandbox/embla-modal-bug-r8x3s8

[davidjerleke]

@modulareverything thanks for your question. Could you create a CodeSandbox with a minimal reproduction where you strip unnecessary details? It's not possible to debug fragments of code. Thanks for understanding!

• Have you seen the Y-axis example in the docs?
• If you haven't already, reading what the docs say about the axis option could help.

Best,
David

[modulareverything]

Hey @davidjerleke, cheers for the fast response.

Yeah, you're right, I wouldn't be able to debug that myself either 😅

Here's a very minimal recreation which seems to be suffering from the same fate:
https://codesandbox.io/p/sandbox/embla-modal-bug-r8x3s8

Toggle the modal, then try to swipe the slides up. You should see it slide up and then rest back in the original position.

[rodrigovallades]

Hey @davidjerleke, cheers for the fast response.

Yeah, you're right, I wouldn't be able to debug that myself either 😅

Here's a very minimal recreation which seems to be suffering from the same fate: https://codesandbox.io/p/sandbox/embla-modal-bug-r8x3s8

Toggle the modal, then try to swipe the slides up. You should see it slide up and then rest back in the original position.

@modulareverything This is related to your CSS.

1. Your .embla__slide is flex: 0 0 50vh;, you shouldn't be dealing with vh unit here.
2. Your .embla__container is missing height.

Take a look at this fixed sandbox:
https://codesandbox.io/p/sandbox/embla-modal-bug-fixed-jfc5wl?file=%2Fsrc%2Fstyles.css%3A13%2C20

[modulareverything]

Awesome. Just so I'm clear, is using vh in flex like that considered bad practice? Or is it more down to how embla calculates height and vh is messing with that?

Thanks for replying 😊

[davidjerleke]

Thanks a lot @rodrigovallades 👍🏻.

@modulareverything Embla is reading element heights so that’s native browser heights - the actual offset height of your elements. I think the culprit in your case was that you missed to set a height in your container as @rodrigovallades mentioned which is also explained here in the docs.

Best,
David