Safari 13 loses drag event

Problem:

On Safari Version 13.0 (14608.1.32 / 15608.1.31.1.2) the drag event is broken after initial drag & drop:

Go to http://sortablejs.github.io/Sortable/
Drag & drop an item in the list
Drag again: there is no drag event, instead the text gets selected.
Click once
Drag event is back

page demonstrating the problem:

http://sortablejs.github.io/Sortable/

Currently, I cannot test on this browser

I can reproduce. Here is a gif showing the problem. Not sure why it would work the first time but not the second.

http://g.recordit.co/3AruBClaZ3.gif

Issue continues to happen in Safari Version 13.0.1 (14608.2.11.1.1).

Can this ticket get a 'bug' label?

@owen-m1

Same issue in latest Version 13.0.1 (15608.2.11.1.8).

I want to look at it. @owen-m1 Any suggestions where to start?

@owen-m1

Hey ! As Safari 13 just became officially released, I noticed that bug.
Just took a few hours in the debugger to see what's going on. It turns out that's a Safari bug.

This issue is the following : whenever you perform a drag with a draggable element, and then drop the item, then the next pointerdown event won't fire (causing the library not being able to know when the user starts the next drag).

Here is a minimum reproducible exemple of the Safari bug : https://codepen.io/Tlokuus/pen/JjPVrLy
Each time you click on the black box, you can see "pointerdown" printed out in the console. But then if you drag and drop the box, the next time you will click on it, "pointerdown" won't print. Following clicks will work again until the next drag&drop.

I'll file a bug report to Apple. In the meantime, @owen-m1 , I suggest to force Sortable.js to use fallback for Safari 13 (as its drag/drop implementation is somehow buggy).

Note: The new iPadOS features a new version of Safari which behaves more than the macOS version. It is though possible that this bug exists also on iPadOS, but I can't test it as I don't have iPad (no issue however on iOS 13 for iPhone).

EDIT : Corresponding bug on Webkit issue tracker : https://bugs.webkit.org/show_bug.cgi?id=202287

@aurelien-roy

Thanks a lot @aurelien-roy, I will look into it for the next release

any idea for a workaround? I've tried to trigger a click() on elements, blur and focus but next drag event does not come up..

Workaround is to set forceFallback: true in the options

If you set forceFallback: true, all work fine in Safari and Chrome but not in Firefox :(

I decided to have the browser detect if it is safari and then add the forceFallback option to true only then.

I'm trying a copy-pasta from stack overflow here: https://stackoverflow.com/a/31732310/1646663

    var isSafari = navigator.vendor && navigator.vendor.indexOf('Apple') > -1 &&
               navigator.userAgent &&
               navigator.userAgent.indexOf('CriOS') == -1 &&
               navigator.userAgent.indexOf('FxiOS') == -1;

Then I take that boolean value as the input on "forceFallback": isSafari

I do this because I have it working so well in other browsers that I don't want to rock the boat :-D

anyone have a solution? it still doesn't work correctly with all these fixes.
Scrolling while moving breaks this.
Also, the workaround doesn't work on nested elements and it's very buggy.

#1571: Dont use pointer events in Safari

Fixed in the commit above

After using forceFallback: true solves Safari 13 issue, but html 5 drag dop event not working. I have a feature that I can drag a draggable item and drop it into a div(like drop file into recycle bin) after forceFallback: true it stops working. Any suggestions on that.

@AnimesHSa

@AnimesHSa This issue is resolved in the latest version of Sortable (1.13.0), so you wont need to use forceFallback with that version

@AnimesHSa

I used the new version and found that without forceFallback=true drag and drop only worked once in Safari 13.1.2, I have to click outside or anywhere in boy then it start to work again. I tried https://sortablejs.github.io/Sortable/#simple-list on Safari and the same not working after one drag-drop. Please help.

@AnimesHSa This issue is resolved in the latest version of Sortable (1.13.0), so you wont need to use forceFallback with that version

Thanks for fixing this issue, however the fix has caused a new issue: On iOS Safari when supportPointer is false, you can't scroll the page on an item targeted by the filter option.
Can you make the above fix only apply to desktop Safari (or only when no touch support)?

@andrews05

@andrews05 Try setting the option preventOnFilter: false

SortableJS#1571: Dont use pointer events in Safari

fix(task): dragging and dropping on mobile

Navigation Menu

Repository navigation

Safari 13 loses drag event #1571

Problem:

page demonstrating the problem:

14 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Safari 13 loses drag event #1571

Description

Problem:

page demonstrating the problem:

Activity

owen-m1 commented on Jul 16, 2019

courtyenn commented on Jul 25, 2019

rienswagerman commented on Sep 13, 2019

rienswagerman commented on Sep 25, 2019

aurelien-roy commented on Sep 26, 2019

owen-m1 commented on Sep 26, 2019

reppair commented on Dec 17, 2019

owen-m1 commented on Dec 17, 2019

14 remaining items

corysus commented on Nov 24, 2020

heysamtexas commented on Jan 2, 2021

daveloping10 commented on Jan 4, 2021

owen-m1 commented on Jan 7, 2021

animeshsarkar-bct commented on Feb 9, 2021

owen-m1 commented on Feb 9, 2021

animeshsarkar-bct commented on Feb 23, 2021

andrews05 commented on Apr 28, 2021

owen-m1 commented on Jul 8, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions