Issues on iOS while sorting

[ibaivalencia]

Hi,

This plugin was working fine until last iOS update. I tried this page demo hoping it was my code issue and it doesn't work.

What happens is that when you pick an item in a sortable list from an iPhone, the placeholder is shown right in the same location of the element and the element follows your finger while moving. However, the placeholder keeps the same original position and doesn't change while moving the element.

Any idea of solving this? Is this logged as a "bug" pending to fix here?

[a5hik]

Hi I will be looking this in 1 or 2 days . and it is already filed via #209.

[a5hik]

@ibaivalencia it works fine on android & the demo section of 'sprint' works on ios.

only the 'kanban' section of the demo which uses bootstrap cols is not working on iOS.

this is very strange and it was working earlier. do you have any instance when it stopped working.
any recent updates? i was not testing this on iOS for a while.

[ibaivalencia]

I haven't updated my ng-sortable recently. I don't know what version do I have (suggestion: could you add version info inside the ng-sortable.js for the future?). And yes, the same, it was working fine until one day stopped working.
I guess something related to iOS 8 update... They could have changed sth in Safari? It's not working yet :(

[a5hik]

@ibaivalencia
Also to narrow down the problem.

1. this is not related to ng-sortable - I did tested with a 1.0 version of ng-sortable and the problem exists, but this used to work earlier.
2. this is not related to a specific browser issue - happens in all browsers.
3. may not only be related to bootstrap styles. the demo of sprint example still works.

we need to see in other aspects, that what that extra presents in the demo page of kanban which is causing this issue.
could be something related to this.. or anything in the same lines?
scottjehl/Device-Bugs#14

[ibaivalencia]

Hi @a5hik ,

Hummm, it's not related to "webkit-overflow-scrolling", I had issues with other plugin in the past with that CSS property so I removed it several months ago. Besides, that issue is quite old, it should be fixed in iOS8.

Do you have any other idea about this? Your simple example ( http://a5hik.github.io/ng-sortable/plunker.html ) is not working as well in my iPhone. So I think there is something weird with the plugin and the last iOS8 update because I didn't change anything and it stopped working nice.

I think that this works fine in Android though.

Regards,
Ibai

[ibaivalencia]

Hi,

This is not happening with all touchable devices. I tried today with an Android and it drag&dropped fine.

Regards,
Ibai

[RevillWeb]

I am also having the same issue as described, since updating to iOS 8.4. (iOS 9 works fine). Any movement or possible work arounds? Thanks for the great plugin.

[RevillWeb]

It appears to be related to "$document[0].elementFromPoint(targetX, targetY)" which is returning the parent element (In my case the app frame) as opposed to the list or list items. I'll keep digging and report anything if I find something I think would be useful. (ps. I'm using flexbox as opposed to bootstrap columns)

[a5hik]

Few more pointers from.. #209 @johnbrunnings

To TEST you must use Safari on iPad

This can easily be demo'd using ng-sortable's own demo pages -

Simple:
http://a5hik.github.io/ng-sortable/plunker.html
Advanced:
http://a5hik.github.io/ng-sortable/

Both no longer work on iPad Safari, but did until recently.

Further you can see this still works using the referenced horizontal sorting plnkr on iPad Safari:
http://plnkr.co/edit/OcaMzBV3c0K3CL1nw9L4?p=preview

This does not contain Bootstrap Cols and thus works.

Finally, if Bootstrap Cols are on only the items themselves, but not on any parent element, ng-sortable does still work. But if ANY parent element uses a Bootstrap Col, iPad Safari will not sort.

Did Bootstrap introduce this issue or ng-sortable?

This is breaking the site we're currently building, which must work on iPad Safari. Please let us know if we need to take this up with Bootstrap.

[RevillWeb]

Does anyone know what exactly it is about the bootstrap cols which prevents it from working because I am getting the same issue and I am not using bootstrap cols, so maybe its some of my own CSS? Any help would be greatly appreciated.

[StanShumsky]

this trick is not working, anymore (didn't test with ios9):
https://github.com/a5hik/ng-sortable/blob/master/dist/ng-sortable.js#L835-L836

Using addClass with promise resolve this issue, but dragging element start flickering.

[jesben]

Had exactly the same issue with iOS 8.4.1 on my Ipad, just updated it to iOS 9, now it works again :)

[a5hik]

@jesben this is a good update, had no clue what was going wrong.

[StanShumsky]

@a5hik adding hidden class to dragging element was to slow:
https://github.com/a5hik/ng-sortable/blob/master/dist/ng-sortable.js#L834-L835
so elementFromPoint get dragging element itself, any slow operation that postpones elementFromPoint call (eg console.log ;) before line 835, fix issue, but I haven't found the right solution yet.

[a5hik]

hence it works on the latest ios update. i'm closing this.

[neswine]

@a5hik I have added the plugin to our project which has support from iOS 8.4. The drag and drop is not working on iPad which has version 8.4.1. Is there any workaround for this issue?