Jump to content
Search Community

Draggable causes two clicks on iPad?

holgersindbaek test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

26 minutes ago, GreenSock said:

I couldn't replicate the issue you reported either, @Julius Friedman. Seemed to work fine for me. 

See the Pen NQOaLx by juliusfriedman (@juliusfriedman) on CodePen



I am using Google Chome, 76.0.3809.100 (Official Build) (64-bit)


Go that that pen and drag the blue outlined box outside of the rectangle and let go when it's position is outside of the box.


It will then snap back to inside the the other box.

 

You can still drag and drop but you won't fire any more press or click events.

pen.gif.9064217cd83a0839f5250b93131e3cc0.gif

If you guys need a screen cast I have attached.

 

Link to comment
Share on other sites

To add another datapoint, I too cannot reproduce and am on a Mac, with Chrome Version 76.0.3809.100 (Official Build) (64-bit)

 

What extensions have you got installed in your browser? Can you try it in a icognito window with any extensions on?

 

@marya his pointer glows when clicking because of his screen recording software. Some of them offer the option to show a circle when recording every time the user clicks. Others even show which mouse button was clicked or keyboard key pressed.

  • Like 3
Link to comment
Share on other sites

37 minutes ago, marya said:

I also used Chrome 76.0.3809.100 (Official Build) (64-bit) and did pretty much what you did, no problems. This is very weird.

Why does your pointer glow when clicking?

 

 
 

It doesn't it's for demonstration purposes. ScreenToGif does that via an option you can configure.

Link to comment
Share on other sites

5 minutes ago, Dipscom said:

It could potentially be that, yes.

 

It's likely it is going to be something like that. An extension or something extra in his machine as now four people have tested and only one seem to be having the issue.

I doubt it as I don't run any extensions and I was just recording the screen with Screen2Gif which shows the clicks for demonstration purposes...

Link to comment
Share on other sites

12 minutes ago, Dipscom said:

It could potentially be that, yes.

 

It's likely it is going to be something like that. An extension or something extra in his machine as now four people have tested and only one seem to be having the issue.

 

Obviously you guys have never used ScreenToGif... This has nothing to do with my machine or extensions...

I was just trying to show you guys the issue...

Here is another screen capture... (slightly too large so I have to link to it)
 

https://giphy.com/gifs/dyingERq65yvQn4Xoc/fullscreen

 

You will see there I reload multiple times and do the same thing quite easily.

 

If i just change the edgeResistance then the problem goes away....

Link to comment
Share on other sites

Don't get me wrong, I am not doubting there's an issue here but it's not as clear cut as "it's a bug in draggable" because, as said before, four people have tried, only one is getting the issue.

 

Like it or not, we have to focus on your setup first and foremost to try and figure out what is going on.

 

I know it sounds far fetched and I understand it works once you set edgeResistance to zero the problem goes away. I could be such an obscure thing...

 

Did you try it in a incognito window? Just for the sake of ruling that out?

  • Like 2
Link to comment
Share on other sites

4 hours ago, marya said:

Hey Julien, I browsed to

(please verify the link) and I don't see the issue you mentioned with edgeResistance. Please double-check? I'm using a desktop computer with a mouse for testing this. I went straight to the pen and dragged the div off to the right halfway across the page. When it popped back its container, I clicked it, and it responded by showing 1 click, 2 clicks, 3 clicks, etc.

 

Yes, in this pen I see the exact same issue as I captured in screen shot. Let me know if you need me to setup a Hangout or something so you can see first hand. The exact URL is 

See the Pen NQOaLx by juliusfriedman (@juliusfriedman) on CodePen

Link to comment
Share on other sites

16 minutes ago, Dipscom said:

Don't get me wrong, I am not doubting there's an issue here but it's not as clear cut as "it's a bug in draggable" because, as said before, four people have tried, only one is getting the issue.

 

Like it or not, we have to focus on your setup first and foremost to try and figure out what is going on.

 

I know it sounds far fetched and I understand it works once you set edgeResistance to zero the problem goes away. I could be such an obscure thing...

 

Did you try it in a incognito window? Just for the sake of ruling that out?

 

Well the issue started out the same way, all I did was adjust the code to only use the GSAP Draggable and this is what I found...

 

Honestly no, I hadn't; but I just did and the same thing happens. If you would like a screen capture I can provide one.

 

This has nothing to do with my PC as I have another and I just tried the same thing there to make sure I am not going crazy... It's a HP laptop and on that machine it DOES NOT happen.


It seems to be resolution / DPI related possibly and the hitTest combined with the edgeResistiance as I previously stated where the loop goes through the client values to offset them for the values in the event.

 

Let me know what I can do to help you guys find the root cause as I am quite sure this has nothing to do with my machine configuration / settings and I would love to be proved wrong.

 

It's also interesting to me because I am also having some positioning issues but when using snaps... Probably not related but who knows.

 

Btw, not to hijack, but if your curious of the issue I was having you can check out 

See the Pen BXgaqO by juliusfriedman (@juliusfriedman) on CodePen


 

  • Like 1
Link to comment
Share on other sites

Looking at this just because I am pretty sure the math in my example is correct...

See the Pen NQOaLx by juliusfriedman (@juliusfriedman) on CodePen

 

I did some debugging and it seems that only onPressInit and onPress are ever fired again but for some reason there are no listeners attached to the object.

a.listeners is empty {} in the minified code.

I modified the example to just log on press and click, please see the pen.

 

Verify this put opening up chrome and putting a break point on the `ka = `function which is basically the function which is raising the events. You will verify there that the callback is never executed by stepping the code.

 

After you guys look into this please take a look at my little dragger example and let me know if that's related to this same issue or not.

 

Thank you.

 

  • Like 1
Link to comment
Share on other sites

Let us not hijack Marya's thread with this issue. She has a rather quirky issue herself that I am also trying to replicate without luck so far. It's best not to mix things up.

 

Have you got another thread going on about draggable? If you do, send me a link to it and we'll continue there. If you don't, create one and we'll go to town with it there.

  • Like 2
Link to comment
Share on other sites

7 minutes ago, Dipscom said:

Let us not hijack Marya's thread with this issue. She's has a rather quirky issue herself that I am also trying to replicate without luck so far. It's best not to mix things up.

 

Have you got another thread going on about draggable? If you do, send me a link to it and we'll continue there. If you don't, create one and we'll go to town with it there.

Not sure what you mean, I was editing my post and I got a call and then something else happened I didn't mean to HiJack, I just updated the pen with that users issue.

 

Please take a look at that because I feel it's related and if not in this pen:

See the Pen NQOaLx by juliusfriedman (@juliusfriedman) on CodePen



On my windows 7 machine there is definitely an issue, onPress is fired and so is onInit but not onClick.

 

And I do apologize for all the editing and confusion, I have a lot going on right now.


I am going to take a break again... maybe until tommorow.

 

Hopefully that will give you guys some time to look into this further.

Link to comment
Share on other sites

I don't mind the hijacking, but since this edgeResistance thing is a new, different issue, it's better to just start a fresh post so that people can look at it separately. So yeah, good idea to do that.

 

Anyway, I'm not a GS dev, so I am not going to try to look into Julien's issue further (sorry, I got my own troubles! ?). I wanted to see if it might be related to my issue, but since I can't reproduce it locally, I don't think that's it. Julien, I have no doubt this is happening to you, and it does seem like potentially a bug, but it also seems tricky to reproduce. Since you yourself found it did not occur on another device, it will be helpful to get more details about the differences between your two devices for the GS devs.

 

FWIW, I currently believe my own issue is a race condition between the Draggable default onClick handling and my framework's onClick handling. So I'm pursuing the tactic of trying to get Draggable's onClick to handle all the needed clicking in my game. I hope it can be made to work. I will certainly post back here with any results.

  • Like 1
Link to comment
Share on other sites

1 hour ago, marya said:

I don't mind the hijacking, but since this edgeResistance thing is a new, different issue, it's better to just start a fresh post so that people can look at it separately. So yeah, good idea to do that.

 

Anyway, I'm not a GS dev, so I am not going to try to look into Julien's issue further (sorry, I got my own troubles! ?). I wanted to see if it might be related to my issue, but since I can't reproduce it locally, I don't think that's it. Julien, I have no doubt this is happening to you, and it does seem like potentially a bug, but it also seems tricky to reproduce. Since you yourself found it did not occur on another device, it will be helpful to get more details about the differences between your two devices for the GS devs.

 

FWIW, I currently believe my own issue is a race condition between the Draggable default onClick handling and my framework's onClick handling. So I'm pursuing the tactic of trying to get Draggable's onClick to handle all the needed clicking in my game. I hope it can be made to work. I will certainly post back here with any results.

Right on, Didn't mean to intrude, just saw your example / demo and thought I could point a few things out so I hoped that helped.

Upon noticing an issue in my other example I revised this and wanted to see if it was having an issue I was having and that's how I noticed the edgeResistance, I don't use the edgeResistance either right now so I just wanted to point that out.

 

Indeed it's weird that it happens on this computer which is well equipped yet not with a laptop which is meager in comparison.

 

Yes, the difference is the OS IMHO but the environment is just running GSAP right? It should work in all environments right?

 

I definitely understand your points on the timing issue and I certainly agree there seems to be some funky logic there; especially on my system and the most we can do is document that and try to reliably replicate it so that GSAP can be a better product.

 

My bad if stepped on any toes and what not, just trying to get the bottom of things.

 

Good luck and let me know if theres anything I can do to help!

Link to comment
Share on other sites

On 8/10/2019 at 8:09 PM, marya said:

Unfortunately, this new device has the same problem as the old device. I open the demo linked above in Chrome, and click-click-click. Eventually, I get a double count. That is, instead of clicking once, it seems like my "touch" click results in two clicks happening.

 

Hi @marya, just to double check with you, this double clicking is happening when you are using the touch, right? Does it happen when using a mouse/trackpad?

  • Like 2
Link to comment
Share on other sites

I think I identified the edge case with edgeResistance intermittently causing problems (only when dragging outside the bounds of course) - it's just a rounding thing related to browsers only having a certain amount of precision when reporting the pointer's position. I posted the revised (uncompressed) Draggable here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

 

Better? 

 

I'm not sure that's at all related to what you were originally describing, @marya. Please let me know if there's anything else behaving oddly.

  • Like 4
Link to comment
Share on other sites

On 8/13/2019 at 8:23 AM, Dipscom said:

 

Hi @marya, just to double check with you, this double clicking is happening when you are using the touch, right? Does it happen when using a mouse/trackpad?

Yes, correct, the double click issue happens when using touch.

 

Sorry but I'm working on multiple things right now, so my responses might be slow, but I will definitely follow up and hopefully can nail this one.

 

@GreenSock I'll test with your latest Draggable. Though, that issue does not sound related to mine.

Link to comment
Share on other sites

More information:

 

I added debug code to your open source version Draggable (not your most recent one, but rather the one from earlier this year, Version 0.17.1).

 

It appears to me that the "two click" problem that I see on my touchscreen Win10 device occurs due to code in Draggable.onRelease.

 

The code looks like this:

 

if ((!_isAndroid || originalEvent.type !== "touchmove") && originalEvent.type.indexOf("cancel") === -1) { //to accommodate native scrolling on Android devices, we have to immediately call onRelease() on the first touchmove event, but that shouldn't trigger a "click".
	console.log("B1");
	_dispatchEvent(self, "click", "onClick");
	if (_getTime() - clickTime < 300) {
		_dispatchEvent(self, "doubleclick", "onDoubleClick");
	}
	eventTarget = originalEvent.target || originalEvent.srcElement || target; //old IE uses srcElement
	clickTime = _getTime();
	syntheticClick = function () { // some browsers (like Firefox) won't trust script-generated clicks, so if the user tries to click on a video to play it, for example, it simply won't work. Since a regular "click" event will most likely be generated anyway (one that has its isTrusted flag set to true), we must slightly delay our script-generated click so that the "real"/trusted one is prioritized. Remember, when there are duplicate events in quick succession, we suppress all but the first one. Some browsers don't even trigger the "real" one at all, so our synthetic one is a safety valve that ensures that no matter what, a click event does get dispatched.
		console.log("E1");
		if (clickTime !== clickDispatch && self.enabled() && !self.isPressed) {
			if (eventTarget.click) { //some browsers (like mobile Safari) don't properly trigger the click event
				console.log("F1");
				eventTarget.click();
			} else if (_doc.createEvent) {
				syntheticEvent = _doc.createEvent("MouseEvents");
				console.log("C1");
				syntheticEvent.initMouseEvent("click", true, true, window, 1, self.pointerEvent.screenX, self.pointerEvent.screenY, self.pointerX, self.pointerY, false, false, false, false, 0, null);
				eventTarget.dispatchEvent(syntheticEvent);
			}
		}
	};
	if (!_isAndroid && !originalEvent.defaultPrevented) { //iOS Safari requires the synthetic click to happen immediately or else it simply won't work, but Android doesn't play nice.
		console.log("D1 delayedCall");
		TweenLite.delayedCall(0.00001, syntheticClick); //in addition to the iOS bug workaround, there's a Firefox issue with clicking on things like a video to play, so we must fake a click event in a slightly delayed fashion. Previously, we listened for the "click" event with "capture" false which solved the video-click-to-play issue, but it would allow the "click" event to be dispatched twice like if you were using a jQuery.click() because that was handled in the capture phase, thus we had to switch to the capture phase to avoid the double-dispatching, but do the delayed synthetic click.
	}
}

If you notice, I added some logging, but this is around line 2010 of the source.

 

When there is no double click, I see B1, D1 delayedCall, and then E1 in the JavaScript console.

 

When there is a double click, I see B1, D1 delayedCall, E1, then F1.

 

Just so it's clear, that F1 must be the guilty party. That code is never exercised when there's a "single click". It is exercised when there's a "double click".

 

I will do a little more sniffing around to see if I can get more details.

Link to comment
Share on other sites

More info:

 

I added another print statement just before

if (clickTime !== clickDispatch && self.enabled() && !self.isPressed) {

When there's no "two click" issue, clickTime is exactly identical to clickDispatch. For example, I see "1565801433538, 1565801433538."

 

When there is a "two click" issue, clickTime and clickDispatch are different, e.g. "1565801437311, 1565801436128".

 

I would be soooooper happy if you could make this issue go away, since then I think I could just use GreenSock Draggable work straight out of the box, and not have to rejig my framework; that is looking quite hairy right now. And this does seem to be a GreenSock issue, although I realize it is difficult to reproduce. (Just to be clear, it is easy to reproduce on the RCA Cambio that I'm testing on - usually I can click my demo less than 10 times, and the "two click" issue appears at least once.)

 

I'd be very interested to know what you guys do to test your framework, and how many devices you test on, how much testing is manual vs automated and so on. If it's not secret sauce ?

Edited by marya
edit to name device where it's easy to reproduce
Link to comment
Share on other sites

That's very tricky indeed, as you're trying to use a native "click" listener instead of Draggable's built-in onClick functionality, but you're still making the same element draggable and in my opinion that's a bit risky because various browser handle things very differently. For example, some browsers require that you preventDefault() on the initial pointerdown/touchstart/mousedown event in order to avoid touch-scrolling while you drag...but if you preventDefault() at that point, then when you pointerup/touchend/mouseup, it won't recognize it as a "click" even if you don't preventDefault() that final event. Other browsers DO treat that as a click event regardless. I could go on and on about all the differences and bugs in browsers surrounding touch/drag/click behavior. 

 

In your demo, it looks like sometimes the browser would dispatch the native "click" event first, but other times it lagged just a tiny bit behind the pointerup/touchend/mouseup event that Draggable taps into. I made a timing adjustment in this version of Draggable which seems to resolve this particular issue: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js but beware that it can't possibly solve other inherent issues related to trying to mix native event handlers with draggable events. 

 

Unfortunately, dealing with all the various browser quirks is just a nightmare. Draggable does a really good job of normalizing things that you run through it, but if you're trying to straddle between letting it handle some things and using native events for other things...well, good luck with that ;) I can only really control what Draggable does with its own behavior. 

 

Hopefully that tweaked version helps. I'd love to hear how it performs for you. 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

@GreenSock It appears that your beta version fixes the issue with my demo. Unfortunately, there's a lingering issue happening at my site.

 

I understand all the issues with different browsers, and you have my sympathy. It's really annoying that there isn't some standard for this behavior.

 

Since you recommend using Draggable.onClick so strongly, I'm going to go back to trying to rework my code to use that. If I can get that to work, it's probably more "future-proof" as well. It doesn't look like it will be easy, but it seems like it should be possible to do that.

  • Like 1
Link to comment
Share on other sites

1 hour ago, marya said:

Unfortunately, there's a lingering issue happening at my site.

Is it something Draggable-related? If you need help, feel free to share more details. 

 

But yeah, I think that as long as you're trying to straddle between your own native handlers of click/touch/pointer events and using Draggable (which smooths most of that out), I'd guess you'll have your hands full :)

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...