[Help]: Carousel lagging in iframe

[hunterbecton]

Summary

Some users experience dropped performance with our carousel components in our docs, which use an iframe. Here's an example of our ProductCardCarousel. It's hard for me to replicate this consistently, but it does occasionally lag on random occasions, like in this video below:

CleanShot.2025-03-27.at.09.55.05-2.mp4

The project is open-source, and the code for the ProductCardCarousel is here. I suspect that it has to do with the component being in an iframe. Still, I wanted to know if someone more familiar with Embla might have some ideas to fix this issue.

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

Additional information

No response

CodeSandbox example

No response

[sarussss]

Hi @hunterbecton.
I haven't figured out why you're having this issue, but it's definitely not the iframe because when I tested without the iframe.
I still got the same issue.

[sarussss]

Hi @hunterbecton.
You can try removing the @container class, I think it might affect the embla calculation.

[davidjerleke]

@hunterbecton, @sarussss is right — container-type: inline-size; is causing the excessive lag. Please refer to the example in the documentation for displaying multiple slides per view.

[davidjerleke]

@hunterbecton have you had a chance to check out this response?

[hunterbecton]

Thanks for the follow-up @davidjerleke! Yes, this makes a huge difference. Thank you for the example, too.