[Help]: Question about CSS rules used

[meirroth]

Summary

Hi @davidjerleke I'm about to deploy Embla slides to prod 😃 just was curios to know the reason behind these two CSS rules, maybe you remember?

• backface-visibility: hidden; on embla__container
• min-width: 0; on embla__slide

I think I figured out why touch-action: pan-y; on embla__container.

Thank you,
Meir

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

No response

[davidjerleke]

Hi @meirroth,

Thanks for your question.

backface-visibility: hidden; on embla__container

backface-visibility: hidden; is there because sometimes some browsers struggle with rendering transforms, which Embla is using to create its scroll effect. For example it can fix unwanted flickering and/or jagged edges. Please read this StackOverflow answer to understand it better.

min-width: 0; on embla__slide

This is here to prevent slides and slide content to grow larger than their slide container. Please read about why this is necessary here.

I think I figured out why touch-action: pan-y; on embla__container.

touch-action: pan-y; should be applied to horizontal carousels to prevent the page from scrolling vertically while scrolling a horizontal carousel, which is horrible UX 🙂. Note that a vertical carousel should have touch-action: pan-x; instead. This property is relevant for touch devices.

Best,
David

[meirroth]

@davidjerleke Thank you for clarifying!