1811771 - Drag mouse event in carousel caught by the browser's drag & drop image event (preventDefault on mousemove doesn't cancel dnd)

Status: RESOLVED INVALID

(Core :: DOM: Events, defect)

Description

[Albert Scheiner [:alberts]]

Attachment: ff-drag-clash-image.gif

Update: a workaround has been addressed by the maintainer of the JS carousel. For new examples of the issue see comments further down.

---

The Embla Carousel* examples don't work in Firefox (109.0b9, macOS 12.6.2, M1, trackpad).
Trying to drag the first, default example results in dragging moving to the next slide to be stuck and the image being dragged instead.
Please see the video "ff-drag-clash-image.gif" to better show case the issue. Maybe the ticket title needs updating as well.

Steps

1. Go to https://www.embla-carousel.com/examples/static/#default
2. open dev tools
3. start dragging the carousel by
   • hovering over the image
   • mousedown
   • hold and drag to the left

Expected

The first image slides to the left and the next carousel item slides into the carousel's viewport

Actual

Selecting the image in the dev tools inspector and watching the .embla__container parent, you can see that the inlined transform: translate3d(0px, 0px, 0px); starts to change with the drag event. But it then stops shortly after and the browser's drag&drop takes over the image (smaller half-transparent version of the image follows the cursor).

Lifting the trackpad (mouseup) at that moment releases the browser's drag&drop and the left/right sliding of the carousel items suddenly works until a new click (mouse up & down) event releases that sliding event.

Note

These examples work fine in Chrome and Safari.

Two other galleries which seem to work similarly, don't have this issue:

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

---

*~127k downloads on npm/week

Comment 1

[Albert Scheiner [:alberts]]

Moving to "DOM Events" based on the linked comment on the Github ticket

Comment 2

[Henri Sivonen (:hsivonen)]

WFM on Ubuntu Wayland session using an ancient trackpad that the computer sees as a mouse. Will try on a Mac with an Apple trackpad later.

Comment 3

[Albert Scheiner [:alberts]]

Hi Henry, David implemented a workaround/fix for Firefox in the meantime.
Please take a look at the commit linked in his comment to see if there is something Firefox would need to differently:
https://github.com/davidjerleke/embla-carousel/issues/424#issuecomment-1400856106

Comment 4

[Henri Sivonen (:hsivonen)]

(In reply to Albert Scheiner [:alberts] from comment #3)

Hi Henry, David implemented a workaround/fix for Firefox in the meantime.

It appears that this has been deployed to https://www.embla-carousel.com/examples/static/#default . In Firefox Nightly on macOS Ventura using 1st generation Magic Trackpad, three fingers, which are used for dragging, moves the carousel instead of starting image drag&drop.

https://codesandbox.io/s/work1o seems to have the original state. In that case, Firefox starts image drag&drop while Chrome and Safari move the carousel. So we indeed to have a Web compat problem.

I see the same difference between https://www.embla-carousel.com/examples/static/#default and https://codesandbox.io/s/work1o in an Ubuntu Gnome session using the ancient trackpad that the system sees as a mouse. Perhaps the workaround had already been deployed to https://www.embla-carousel.com/examples/static/#default yesterday when I wrote comment 2?

Please take a look at the commit linked in his comment to see if there is something Firefox would need to differently:
https://github.com/davidjerleke/embla-carousel/issues/424#issuecomment-1400856106

Edgar, is this your area? Our event behavior does look inconsistent with other browsers here.

Comment 5

[Edgar Chen [:edgar]]

I do see the difference between Chrome and Firefox on https://codesandbox.io/s/work1o where Firefox trigger the dnd action on the image, but Chrome doesn't. I found that page does https://github.com/davidjerleke/embla-carousel/blob/44931bb70820232bb42c3509ce327a1bcf99da58/packages/embla-carousel/src/components/DragHandler.ts#L109-L128 in mousedown event listener and somehow it suppresses the dragstart on Chrome (if I remove that event handler, Chrome also trigger dragstart event), but we still fire dragstart event. I am not sure why, need to take a closer look.

Comment 6

[Edgar Chen [:edgar]]

Take a another look, it is because of https://github.com/davidjerleke/embla-carousel/blob/44931bb70820232bb42c3509ce327a1bcf99da58/packages/embla-carousel/src/components/DragHandler.ts#L144 (disabling mousedown event listener cause the mousemove listener isn't registered). So this is the https://github.com/w3c/uievents/issues/278, where spec says mousemove isn't cancelable, so prevent default mousemove event should not cancel selection and drag action, but it seems Chrome is unable to fix the dragging part.

Comment 7

[Edgar Chen [:edgar]]

(Safari behaves the same as us)

Comment 8

[Edgar Chen [:edgar]]

(In reply to Edgar Chen [:edgar] from comment #6)

it seems Chrome is unable to fix the dragging part.

Oh, Chrome fixed this in https://issues.chromium.org/issues/40078978. And all browsers pass mousemove_prevent_default_action.html now.

But Chrome still cancel the drag and drop in some case, e.g. https://codepen.io/edgarchen-the-decoder/pen/XWQBrMy?editors=1111.
I think it is a Chrome bug.

Comment 9

[Edgar Chen [:edgar]]

(In reply to Edgar Chen [:edgar] from comment #8)

I think it is a Chrome bug.

Chromium bug: https://issues.chromium.org/issues/334952574.