Draggable dragging offset is 200px off in iOS 12

[dmatamales]

When dragging objects on this page using draggable in iOS 13 and on desktop in Chrome 77 under macOS 10.14.6, the offset is fine, but in iOS 12 the item starts out about 200-300px above the user's touch point. The item floats above the touch point, but the touch point still works okay for droppable.

https://rethinkwaste.org/residents/interactive-carts-new/

I'm not quite sure how to fix this issue, or why it is only occurring in iOS 12. Any help or suggestions would be appreciated.

[RWAP]

This does not appear to be related to jquery-ui-touch-punch - are you even linking that in?

I guess it is more to do with either jquery-ui or your css

[dmatamales]

Thanks for your response. I switched to your fork, but yes, some version of jquery-ui-touch-punch has definitely been linked in all this time. It's the only reason touch events work at all on the page :) I have an optimizer running in WordPress/PHP that changes the name of the script when it minimizes it, but you can confirm it's in there if you look through the scripts in the sources panel in the inspector under /wp-content/cache/autoptimize/1/js.

The issue is literally ONLY happening in iOS 12 — not iOS 13 and not iOS 10 and not in Google Chrome 77 on the Mac. Any changes I make to CSS offset the image in the wrong direction on the platforms where it currently works and don't seem to have any bearing on the issues happening in iOS 12. Any suggestions you have would be greatly appreciated.

[RWAP]

Without knowing the differences in iOS12 and iOS10 / iOS13 it is possibly something you would have to swallow, or use javascript to check the operating system on the browser and adapt accordingly...

I still think this is more jquery ui related - but as I don't own any apple devices, I would have to leave it to those in a better position than myself.

[raybeer]

Hello, our application is having the inverse problem of the top comment. We are running the most current jquery-ui and jquery-ui-touch-punch versions. Recently, after iOS 13 update, our draggable sortable lists all have the same issue described where there is an offset above the user's touch point. When we simulated the iOS 12 version, however, the same list worked fine. The list also works fine (the same as before) on all desktop and Android devices.

So, the only problem I see is upgrading to iOS 13 causes the incompatibility with jquery-ui-touch-punch. I don't know whose side (apple vs this team) has the responsibility of updating the compatibility, but I just wanted to post here in case there are others experiencing the same issue. This thread really threw us off because we were experiencing the opposite issue, so we went on a deep hunt through the web, but now all fingers are pointing to the iOS 13 update.

[RWAP]

Sounds as though Apple need to investigate this - jquery-ui-touch-punch does not pass any details about the positioning of the touch if you look at the code, it simply makes the system believe a mouse has been held down rather than a finger.....