Too many Snaps on Firefox with containScroll: 'trimSnaps'

[mUzzzie]

Bug is related to

• embla-carousel (core package)

Embla Carousel version

• v8.0.0-rc03

Describe the bug

When having containScroll: 'trimSnaps' enabled and setting slide width relative (e.g. 20%), embla adds empty snaps on Firefox which results in additional navigation dots and enabled arrow buttons when there is nothing to scroll. Sometimes at the beginning, sometimes at the end of the carousel. No issue on Chome or Safari.

CodeSandbox

https://codesandbox.io/s/mtj878?file=/index.html

Steps to reproduce

containScroll: 'trimSnaps', slide-width: 20%, 25% + gap, open in Firefox

Expected behavior

See Chrome

[davidjerleke]

Hi @mUzzzie,

Thanks for your bug report. This seems to be a bug in Firefox and my initial hunch is that it could be caused by how Firefox handles subpixels or similar. As you've mentioned, the Chrome/Safari behaviour is the correct behaviour.

Chrome/Safari

Firefox

Feel free to investigate the code and see if you can find the culprit. This is the file that is responsible for the containScroll logic.

Best,
David

[mUzzzie]

I'm afraid i'm the wrong person for javascript matters. Sorry I can't help :/
Anyway, are you planning an update regarding this matter? Love the carousel but since in my case everything depends on trimSnaps, i'd have to find another library otherwise. Thanks a lot!

[davidjerleke]

Anyway, are you planning an update regarding this matter?

@mUzzzie yes, of course. This is a bug so I will solve this. But I can’t give time estimates because I’m maintaining this lib for free so this project isn’t paying any of my bills 🙂.

Best,
David

[mUzzzie]

@davidjerleke Sure, I know - That is why I'm all the more appreciating your work 🙂

[davidjerleke]

Hi @mUzzzie,

It seems like Firefox is including a lot of decimal places on numbers retrieved from element.getBoundingClientRect(). Trimming the decimal places to two or three seems to do the trick (and shouldn't cause any visually noticeable problems).

Please test this CodeSandbox and see if this is working as expected. It would also be good if you could test it in Chrome and Safari to try different slide sizes that was causing the problem in Firefox.

Best,
David

[mUzzzie]

Works perfectly in all browsers.
Thank you!

[davidjerleke]

Thanks for testing @mUzzzie! To be released with v8.0.0-rc05.

[davidjerleke]

@mUzzzie this has been released with v8.0.0-rc05. Thanks for this bug report.