Safari 13 loses drag event

[rienswagerman]

Problem:

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

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

page demonstrating the problem:

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

[owen-m1]

Currently, I cannot test on this browser

[courtyenn]

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

[rienswagerman]

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

Can this ticket get a 'bug' label?

[rienswagerman]

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?

[aurelien-roy]

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

[owen-m1]

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

[reppair]

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..

[owen-m1]

Workaround is to set forceFallback: true in the options

[reppair]

sure, it works, I need to fix a custom DnD I wrote, can you share what it dues exactly? I tried to dig it out but could not figure it?

[owen-m1]

@reppair What would you like me to explain?

[reppair]

In general how you work around the problem. What does this option actually do?

[owen-m1]

@reppair It stops Sortable from using the browser's native drag and drop API (which is broken in the case of Safari 13). However, Sortable has it's own implementation code that let's it simulate drag and drop without using the browser's native API. So basically, it's the exact same except you will not be able to use some of the native drag and drop features such as dataTransfer. But using the fallback actually gives you more control over styling.

[lvegerano]

So we just ran into this problem with Safari. Going over the lib code again there is an option (not documented) supportPointer that if set to false makes the lib work with mousedown /touchstart and fixes this issue. @owen-m1 any downside to be using those events instead of pointer events?

[scottjg]

unfortunately still an issue in safari 13.1

either supportPointer: false or forceFallback: true does seem to work ok, though. should there be a user agent check for safari?

[einfallstoll]

Where's the documentation for supportPointer?

[owen-m1]

@einfallstoll it is just whether or not Sortable will use the pointer events or not

[netgfx]

Both supportPointer: false and forceFallback: true throw an error on create.

imagesSortable = Sortable.create(jQuery("#images-container")[0], {
                                sort: true,
                                animation: 200,
                                supportPointer: false,
                                draggable: ".img-container",
                                fallbackTolerance: 5
                            });

Is this the correct way to declare those properties?

[superdc]

Because I want to slove the problem in Safari 13, I set the option forceFallback: true, but then I got another problem in Chrome, Safari and Firefox. The problem is: when a drag a elem then drop, it goes back to the original position, but then the page's button can't be clicked, it need to click two times. I set the supportPointer: false cannot solve. How to solve the problem? Need Help.

[diligentpig]

Encountered the same issue in Safari Version 13.0.5 (15608.5.11), while it works as without issue in Chrome and Firefox.

[lordofthedanse]

I ran into same problem on Safari 13.1 — adding forceFallback: true fixed the problem and it caused no problems in Chrome 83.

Thanks to all for raising this issue and finding a solution — this was a head scratcher for me.

[JayPalm]

Thanks! I was ready to give up just before I found this!

[corysus]

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

[heysamtexas]

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

[dogaoz]

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.

[owen-m1]

Fixed in the commit above

[animeshsarkar-bct]

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.

[owen-m1]

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

[animeshsarkar-bct]

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

[andrews05]

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)?

[owen-m1]

@andrews05 Try setting the option preventOnFilter: false