Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Safari 13 loses drag event #1571

Closed
rienswagerman opened this issue Jul 16, 2019 · 30 comments
Closed

Safari 13 loses drag event #1571

rienswagerman opened this issue Jul 16, 2019 · 30 comments

Comments

@rienswagerman
Copy link

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/

@rienswagerman rienswagerman changed the title Safari 13 drag event issue Safari 13 drag event lost Jul 16, 2019
@rienswagerman rienswagerman changed the title Safari 13 drag event lost Safari 13 loses drag event Jul 16, 2019
@owen-m1
Copy link
Member

owen-m1 commented Jul 16, 2019

Currently, I cannot test on this browser

@courtyenn
Copy link

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
Copy link
Author

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

Can this ticket get a 'bug' label?

@owen-m1 owen-m1 added bug and removed bug labels Sep 14, 2019
@rienswagerman
Copy link
Author

rienswagerman commented Sep 25, 2019

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
Copy link

aurelien-roy commented Sep 26, 2019

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
Copy link
Member

owen-m1 commented Sep 26, 2019

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

@reppair
Copy link

reppair commented Dec 17, 2019

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
Copy link
Member

owen-m1 commented Dec 17, 2019

Workaround is to set forceFallback: true in the options

@reppair
Copy link

reppair commented Jan 9, 2020

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
Copy link
Member

owen-m1 commented Jan 9, 2020

@reppair What would you like me to explain?

@reppair
Copy link

reppair commented Jan 14, 2020

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

@owen-m1
Copy link
Member

owen-m1 commented Jan 14, 2020

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

RileyRaschke added a commit to RileyRaschke/blackjack-trainer-js that referenced this issue Feb 21, 2020
@lvegerano
Copy link
Contributor

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
Copy link

scottjg commented Mar 26, 2020

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
Copy link

Where's the documentation for supportPointer?

@owen-m1
Copy link
Member

owen-m1 commented Apr 14, 2020

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

@netgfx
Copy link

netgfx commented Apr 24, 2020

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
Copy link

superdc commented Apr 29, 2020

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
Copy link

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

@lordofthedanse
Copy link

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
Copy link

JayPalm commented Aug 25, 2020

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

@corysus
Copy link

corysus commented Nov 24, 2020

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

@heysamtexas
Copy link

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
Copy link

dogaoz commented Jan 4, 2021

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
Copy link
Member

owen-m1 commented Jan 7, 2021

Fixed in the commit above

@animeshsarkar-bct
Copy link

animeshsarkar-bct commented Feb 9, 2021

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
Copy link
Member

owen-m1 commented Feb 9, 2021

@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
Copy link

animeshsarkar-bct commented Feb 23, 2021

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
Copy link

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
Copy link
Member

owen-m1 commented Jul 8, 2021

@andrews05 Try setting the option preventOnFilter: false

Runi-c pushed a commit to Tupperbox/Sortable that referenced this issue Nov 10, 2023
vikunja-bot pushed a commit to go-vikunja/vikunja that referenced this issue Sep 18, 2024
This change fixes a regression introduced in 1cbb93e.
In that change, the whole task area was made clickable using mouse events directly. Unfortunately, this also prevented the parent component of the task component to recieve them, essentially never getting notified about the mouse movement and thus never dragging the task. I don't know why this is only a problem on Safari, but it might be related to SortableJS/Sortable#1571 (comment)

Resolves https://community.vikunja.io/t/task-re-ordering-is-not-working-in-safari/1916
Resolves https://kolaente.dev/vikunja/vikunja/issues/2092
Resolves #304
vikunja-bot pushed a commit to go-vikunja/vikunja that referenced this issue Sep 20, 2024
This change fixes a regression introduced in 1cbb93e.
In that change, the whole task area was made clickable using mouse events directly. Unfortunately, this also prevented the parent component of the task component to recieve them, essentially never getting notified about the mouse movement and thus never dragging the task. I don't know why this is only a problem on Safari, but it might be related to SortableJS/Sortable#1571 (comment)

Resolves https://community.vikunja.io/t/task-re-ordering-is-not-working-in-safari/1916
Resolves https://kolaente.dev/vikunja/vikunja/issues/2092
Resolves #304

(cherry picked from commit abf92e2)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests