Carousel re-init on very small width change

[hamidrezahanafi]

Hello everyone,
I checked that resize observer can react to very small width/height changes for example in my case the change was from 163.890625 => 163.89060974121094 (which I think it's not actual change and is rounding of the browser)
Is it a good idea if the condition of new size vs old size to be more than 1 pixel instead of not equal?

[davidjerleke]

Hi @hamidrezahanafi,

Thanks for your input. Yes it will react to any change because that's how ResizeObserver works. Sometimes this may be the wanted behaviour and sometimes not. I can't rule out that this is the wanted behaviour in some cases. It's impossible for me to know.

However, if you read the docs, Embla gives you the freedom to provide your own callback and customise the resize behaviour. For convenience, it gives you the emblaApi and resize observer entries:

const [emblaRef, emblaApi] = useEmblaCarousel({
  watchResize: (emblaApi, resizeObserverEntries) => {

    // you can also access the current rects like this:
    const { slideRects, containerRect } = emblaApi.internalEngine()

    // do your own thing and run reInit() when you think the carousel should reset and pick up changes
    if (yourCustomConditionIsMet) emblaApi.reInit()
    
    // return false so Embla doesn't fire it's default resize behaviour after your custom callback
    return false
  }
})

Best,
David

[davidjerleke]

@hamidrezahanafi thanks for explaining further.

I see. Well browsers can't render super sub-pixels anyway som maybe we should do something like this here instead:

if (mathAbs(newSize - lastSize) >= 0.5) {
  // ...trigger resize
}

...which means only do something when the container or any slide size changes by half a pixel?

Best,
David

[hamidrezahanafi]

Yes that's exactly what I had in mind, I think it would work.

[davidjerleke]

@hamidrezahanafi feel free to create a PR if you have time. Import mathAbs from utils. Maybe we can do 0.2px instead of 0.5px. I guess that would still solve the problem.

Best,
David

[hamidrezahanafi]

#570

[davidjerleke]

Thanks a ton @hamidrezahanafi ⭐!

[davidjerleke]

• Tracked in Resize handler precision mismatch #571.