Problem with Draggable on Android browsers

[Beholder4096]

Hey guys, it's Beholder4096.

 

I am pretty much at the end of my rope here. I have isolated the problem to the maximum degree, on my site the bug also shows in Vivaldi (chromium) in console, when I switch-on the mobile view. But the isolated version on codepen shows th bug only on Android directly, you should load the pen into Samsung Internet or mobile Chrome to see the problem.

 

Basically, when you run it and try to move the green box to the right, after about 80 pixels it should tell you "drag end fired". ON PC IT WORKS. Even in simulated chrome/chromium/vivaldi mobile view. But on android, the box just stops and stupidly hangs there. When you try to move it again to the right, it moves 80px again and again stops.  The Draggable.endDrag() simply stops working each time, not firing the "onDragEnd" event.

 

Confusingly, when I move the box to the left from right, the onDragEnd event fires.. Unbelievable. Can anyone please explain if I am making some kind of basic mistake? or perhaps just fix the Draggable to work properly on Android.

See the Pen KKogozo by Beholder4096 (@Beholder4096) on CodePen

[GreenSock]

Ugh, that sounds frustrating @Beholder4096. 

 

It looks like you're using a REALLY old version of GSAP and Draggable. Like...crazy old. Have you tried updating to the latest version? I'd definitely recommend that. I don't have a Samsung Android device near me, so I can't really look at this there but I'm very curious to hear if it gets resolved for you by simply updating your files to the more modern ones. 

 

Another question: is the onDrag firing for you on Android? Your code is calling endDrag() for sure, right? 

[Beholder4096]

Hi, I am sorry I didn't mention I am using the GSAP 3.10.4 as well as Draggable of the same version on my site. I just didn't know really well how to work with Code Pen so I guess I just forked some old version from some old pen. 

 

 

Here is the updated version of the pen, I have also isolated the problem again a bit more closely.. it looks like that if I include that div with class="card single" then endDrag() stops working properly on the Android. It stops the movement, but doesn't fire the onDragEnd(). EDIT: The pen was changed in the meantime, please look at the post below.

 

onDrag is firing fine.. it runs endDrag() but the endDrag() doesn't fire the onDragEnd(). Please check the code in the pen, it's very clear what I am doing there. I synthetised this bug to the very limit of what I can do. I will still keep picking stuff off the div "card single" to see if I figure out something but this is pretty much it.

 

[Beholder4096]

so I have further isolated to this, and it's really the end for me here:

<div class="" style="z-index:300;height: 200px;width: 200px; position:absolute; background:green;">
		<div style="height: 200px;width: 200px;">

		</div>		
</div>

If I run it with this absolute element that contains this div, then the bug shows on Android browser on the above Code Pen and on my site. And in Vivaldi browser Galaxy A51 emulation but that one only on my site, not on Code Pen.

If I change the size of the inner invisible box to 100x100 then endDrag() works fine. Weird, huh?

[Beholder4096]

@GreenSock 

Release event is not fired as well when I make the bug appear. It's kind of obvious but I wanted you to know.

[Beholder4096]

So here is the offending code in question from Draggable.js with the 'buggy touch' values in brown bg. 

This code returns -undefined-, but it should not even get to that return, I think. It should continue executing after this code but this code stops that. The whole endDrag()/onRelease() in the Draggable.js code fails on this piece of code on my Android device / browsers, even in the example in the Code Pen.

 

 

[GreenSock]

Does this version of Draggable resolve things for you?:

https://assets.codepen.io/16327/Draggable3.min.js

[Beholder4096]

Yes it did! It will take me a while to make the site fully funcitional after the b*mb I have made when testing this bug in various ways but Ithink the main problem is fixed. What did you do to fix it, where was the problem really?

 

I have another small bug for you that I had to make a workaround for but I will let you know about it in another thread when I retest it after getting my code fully in order after this. It will be easier to test since it seems to be a Win10/Chromium issue.

 

AMAZING WORK AND THANK YOU! Please let me know what happened in this bug.

[GreenSock]

33 minutes ago, Beholder4096 said:

What did you do to fix it, where was the problem really?

 

if (i < 0 && !force) { // <- added && !force
  return;
}

Draggable has to do a lot to work around various browser bugs and differences (Android, iOS, and Windows all handle things very differently). It must match up the event properly so that if you do a multi-touch, it ensures that this finger is the one that started the drag, for example. When you called .endDrag(), the event you passed in didn't match up, thus it was bailing but there's a parameter to basically say "I don't care what happens - FORCE the onRelease to occur!" and I tapped into that.

 

Make sense?

 

Glad it's resolved. 

[Beholder4096]

Perfect thank you. Another bug incoming in 5min.

[Beholder4096]

FYI it was always that one finger only, nothing else, no other gestures/moves. Even on emulation in Vivaldi, always the emulated touch cursor and one touch gesture to top/right.

[Beholder4096]

25 minutes ago, GreenSock said:

 

if (i < 0 && !force) { // <- added && !force
  return;
}

Draggable has to do a lot to work around various browser bugs and differences (Android, iOS, and Windows all handle things very differently). It must match up the event properly so that if you do a multi-touch, it ensures that this finger is the one that started the drag, for example. When you called .endDrag(), the event you passed in didn't match up, thus it was bailing but there's a parameter to basically say "I don't care what happens - FORCE the onRelease to occur!" and I tapped into that.

 

Make sense?

 

Glad it's resolved. 

 

@GreenSock oh, 1 more thing after rereading this: what event then should I have passed to the  endDrag() when not the event which came as a parameter of the onDrag(e) event? This was not clear to me also from the docs and now I see even the code doesn't understand if I pass that event that came with onDrag(e).

[GreenSock]

It's not that you did anything wrong. Some Android devices dispatch a "touchstart" AND "pointerdown" initially, and then only "pointermove" thus the touchID may not match because it was grabbed from the "touchstart" event whereas the pointer event is the one that the browser dispatches for move, so even though you had only one finger down the whole time the browser does some weird stuff that makes the id not match up.

[Beholder4096]

Hmm, I originally thought that these things must be really completely set to standards, otherwise sh!t would just break.. oh well, here we are..

I also never asked you about those weird sizes of the inner box which actually affected this bug. 200x200px was not working properly [endDrag() not properly ending the touch], while 100x100px was working pretty much all the time. How come? some more mobile/browser quirks?

[GreenSock]

16 minutes ago, Beholder4096 said:

I originally thought that these things must be really completely set to standards, otherwise sh!t would just break.

Welcome to my world. Ha. Yeah, you'd certainly think all the browser vendors would standardize behavior. That definitely isn't true, especially with touch/pointer behavior. Super frustrating. 

 

18 minutes ago, Beholder4096 said:

I also never asked you about those weird sizes of the inner box which actually affected this bug. 200x200px was not working properly [endDrag() not properly ending the touch], while 100x100px was working pretty much all the time. How come? some more mobile/browser quirks?

I'm not sure, but it's all working in the latest beta file, right? It definitely sounds like a browser oddity. I just don't want to burn hours on that unless something still isn't working for you.