Dragging not working well in Firefox for desktop

[scheinercc]

Bug is related to

• embla-carousel (core package)

Embla Carousel version

• v7.0.8

Describe the bug

Tested with Firefox 108/109, macOS 12, M1

Trying to drag the image in the static default example to the left in order to move the carousel, results in a "drag&drop" of the whole image* rather than a drag of the carousel
*(smaller half-transparent version of the image follows the cursor)

I created a ticket in bugzilla, but opened this here as well, as this is working in other, similar components/examples like

• https://swiperjs.com/demos#thumbs-gallery-loop
• https://flickity.metafizzy.co/#images

Hence I am not sure if it is the browser or the component - or a combination.

CodeSandbox

https://codesandbox.io/s/work1o

Steps to reproduce

1. open https://www.embla-carousel.com/examples/static/#default in Firefox
2. mouse down in the image
3. move to the left

Expected behavior

Smooth dragging of the carousel

Additional context

See bugzilla ticket for screencast: https://bugzilla.mozilla.org/show_bug.cgi?id=1811771

[davidjerleke]

Hi @scheinercc,

Thanks for reporting this 👍🏻. I suspect that this is related to the new passive event implementation:

• Passive event listeners #62

Have you tried other browsers? Do you run into the same problem there?

Maybe I need to prevent the dragstart event default when the user is dragging the carousel.

I’ll let you know when I’ve investigated possible solutions. Meanwhile, If you find anything that could be useful, please share.

Cheers,
David

[davidjerleke]

@scheinercc seems like Firefox is the only browser triggering the dragstart event on images 😕. A bug fix is on its way:

• Dragging not working well in Firefox for desktop #426

[davidjerleke]

A bug fix has been released with v7.0.9. Thanks for creating this issue 👍🏻.