davidjerleke/embla-carousel

[Bug]: Height is getting set to 0

gregg-cbs opened this issue · 4 comments

gregg-cbs commented

Which variants of Embla Carousel are you using?

  • 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)

Steps to reproduce

The bug occurs when I hard refresh the page and the carousel is not in view. The carousel has images in it. The height is getting set to 0px. If I remove the 0px and the carousel slides, the 0px height gets reapplied.

Expected Behavior

The height should not get set to 0.

Additional Context

Sometimes this height 0 happens on load and sometimes it happens after swiping. The image is there, but autoheight seems to set the container to 0.
image

What browsers are you seeing the problem on?

Firefox, Safari

Version

8.0.2

CodeSandbox

https://www.utickets.co.za/

Before submitting

  • I've made research efforts and searched the documentation
  • I've searched for existing issues
  • I agree to follow this project's Contributing Guidelines for bug reports
davidjerleke commented

Hi @gregg-cbs,

Thanks for your bug report. Neither embla-carousel-svelte nor embla-carousel-autoplay has any code that manipulates the height property of the container or any other element for that matter. You’ll have to look somewhere else in your code or debug a different library that you’re using.

Best,
David

gregg-cbs commented

Sorry I see I chose autoplay instead of autoheight! :/
When i remove autoheight plugin this behaviour goes away.

Auto height sometimes calculates a height of 0px.

My guess is that the image has not been painted by the browser or downloaded and in some cases the carousel calculates the height before this happens and the height is 0.

This means I will have to apply heights to my images but what I chose to do instead is only apply autoheight on my text carousels and steer clear of it on my image carousels which works for me.

davidjerleke commented

@gregg-cbs thanks for the additional information.

Sorry I see I chose autoplay instead of autoheight!

Yes, that’s what caused the confusion then.

My guess is that the image has not been painted by the browser or downloaded and in some cases the carousel calculates the height before this happens and the height is 0.

This is most likely the case but it’s not a bug. The default behavior for Embla is that it will only react to slide size changes that affect the chosen scroll axis. This means that a horizontal carousel only re-initializes when the container and/or slide widths change. In contrast, a vertical carousel only re-initializes when the container and/or slide heights change.

However, you can customize the resize behavior easily with the watchResize option. The most simple way to solve this would be to re-initialize the carousel when any dimension change, whether it’s heights or widths:

<script>
  import emblaCarouselSvelte from 'embla-carousel-svelte';

  let options = { 
    watchResize: (emblaApi) => {
      window.requestAnimationFrame(() => {
        emblaApi.reInit()
        emblaApi.emit('resize')
      })
      return false
    }
  };
</script>

<div class="embla" use:emblaCarouselSvelte="{{ options }}">...</div>
gregg-cbs commented

woah nice. Thank you. I will look into watchResize. Appreciate the response!

  • 🎉1