Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Friebel

Touch is not working on Draggable in Firefox Windows [v3.2.4]

Recommended Posts

Having problems with touch on some projects that are using Draggable I am now diving into this. I'm having problems with touch on both rotating draggables as well as translating draggables on several browsers, but Firefox seems to be the most problematic one. This thread though is about a particular draggable issue that only seem to affect Firefox, while other browsers seem to work fine:

 

The codepen included here is, as you can see, as easy as it can get. A svg circle where Draggable is put on with inertia and rotation. Touch in this example is running fine in browsers like Chrome and Ms Edge (chromium based browsers), but touch is not working at all in Firefox (Windows) here.

 

In the codepen I used the actual gsap template from this forum, which is still using version 3.2.3, but I've also seen this beviour in version 3.2.4 locally here.

 

[edit] the touchstart seem to be triggering something in draggable though, because when just moving the mouse after trying to drag with touch, the object gets dragged, eventhough none of the mousebuttons are pressed. Also this issue occurs with Draggable type set to 'x,y' as well as set to 'rotation'

See the Pen JjdOKQr by Friksel (@Friksel) on CodePen

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

Hey Friebel. 

 

The demo you included works fine for me on FF on Android. What OS are you testing on? 

Link to comment
Share on other sites

2 minutes ago, ZachSaucier said:

Hey Friebel. 

 

The demo you included works fine for me on FF on Android. What OS are you testing on? 

That's what I wrote in the post; Windows. Windows 10. Firefox 73.0.1

  • Thanks 1
Link to comment
Share on other sites

Can confirm. Something @GreenSock needs to look into.

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

I can also confirm that in Firefox for Android 68.5.0 it is still working. I don't know how version numbers go with Firefox cross devices, because on Windows Firefox the latest is 73.0.1 and on my Android device it's still at 68.5.0. I just looked for updates on Android, but Google Play store doesn't show me any updates.

 

So for now this seems to be a Firefox for Windows (and mac?) or desktop only issue. Or maybe the issue is there on Android Firefox 73.0.1 too, but that version isn't released yet?!

 

[edit] I've changed the title

 

  • Like 1
Link to comment
Share on other sites

34 minutes ago, Friebel said:

Or maybe the issue is there on Android Firefox 73.0.1 too, but that version isn't released yet?!

 

Nah. Android Firefox is a different browser. One difference is that the Android version doesn't support pointer events by default. 

https://caniuse.com/#feat=pointer

 

I think Draggable uses pointer events whenever possible because it works for mouse and touch.

 

  • Like 2
Link to comment
Share on other sites

@OSUblake
That's part of the reason in all projects here I removed all 'pointer'-event listeners two weeks ago. I only use mouse events and touch events now. Support for pointer-events always have been troublesome across browsers. Reading the caniuse page, I'm glad I did that! 😀

 

BTW that was also important for event handling priority order; in all browsers touch comes first and than mouse. So when a user uses touch, we can preventDefault() to prevent the mouse handlers to trigger as well. But when using pointer events, they come even before touch, which messes things up in the flow.

Link to comment
Share on other sites

By default, IE and Edge don't support touch events. You have to use pointer events.

 

7 minutes ago, Friebel said:

But when using pointer events, they come even before touch, which messes things up in the flow.

 

Why would use touch and pointer events? Here's a good article about how to handle those situations.

https://developers.google.com/web/fundamentals/design-and-ux/input/touch

 

Basically

if (window.PointerEvent) {
  element.addEventListener("pointermove", someFn);
} else {
  element.addEventListener("touchmove", someFn);
  element.addEventListener("mousemove", someFn);
}

 

 

  • Like 2
Link to comment
Share on other sites

9 minutes ago, OSUblake said:

By default, IE and Edge don't support touch events. You have to use pointer events.

Yes they do. Sorry, what you write just isn't true. Not sure why you really think that. All my interactives run perfectly fine in both IE11 as well as Edge with both touch as mouse, while not using 'pointer'-events. The latter (Edge) even is just Chromium nowadays, so that's not having any problems whatsoever in this area.

 

Really, 'pointer'-events always have been the troublesome kid. Not touch. Nor mouse.

 

BTW, the link you include in your post is from the year 2014... it's 2020 now, so that's 6 (!!) years ago. We all know that that's 99 years in front-end terms.

Link to comment
Share on other sites

14 hours ago, Friebel said:

The latter (Edge) even is just Chromium nowadays, so that's not having any problems whatsoever in this area.

 

I'm not talking about that version.

 

14 hours ago, Friebel said:

Yes they do. Sorry, what you write just isn't true. Not sure why you really think that.

 

Um.... because I'm right.

 

See the Pen d84560d06bad8055fe0154ed60e9620c by osublake (@osublake) on CodePen

 

The only way that will work in Edge is if you turn on a flag in about:flags

 

image.png.763e106f94566aaff82a9b31d4308a1f.png

 

 

  • Like 2
Link to comment
Share on other sites

Not sure if this is the problem, but I see at least one line in the Draggable code that doesn't look right:

_isTouchDevice = "ontouchstart" in _docElement && "orientation" in _win;

 

Recently browsers have changed. I had to convert all my projects because of that, so that's why I know. 

We can't do this anymore:

if ('ontouchstart' in window) {

  // has touch

}

Because 'ontouchstart' is removed in some browsers. I believe that's in chromium, but it might be Firefox (as well?) where it was.

 

Detecting if a browser supports touch events cannot be done that way anymore. Now we need to detect if touch is supported in other ways. Like using a try, catch around an actual addEventlistener and see if it is ok or catches an error.

 

That might be causing this issue in Draggable. At least the line mentioned above looks outdated to me. (line 796 in Draggable.js)

 

 

 

 

Link to comment
Share on other sites

46 minutes ago, OSUblake said:

I'm not talking about that version.

 

 

Um.... because I'm right.

So you want to proof something is running or not running in Internet Explorer and now you make a codepen as a demo?

First, to come on this forum in IE11, the Greensock website throws an error in IE11, because it's using 'foreach' which IE11 doesn't support (no offense at all to greensock btw, maybe the site just doesn't support ie11). Than, when clicking through that to visit your demo on codepen, codepen doesn't even run in IE. Not from within this forum and not when we go directly to the site. It tells us it's an 'Unsupported browser' and doesn't show us anything more. Codepen just doesn't work in IE. Maybe if you have a PRO version you can use it, but I don't have it and my guess is you don't either. So what's your point? Also, you are talking about the old Edge which is not supported anymore and it is replace with the same name (Edge) by the Chromium version? Sorry, but the old Edge is totally irrelevant now. Espectially when every modern browsers has auto update these days.

 

On topic again please: there's an issue in Draggable that needs to be fixed. See my previous post for a direction. Have a nice weekend!

Link to comment
Share on other sites

41 minutes ago, Friebel said:

BTW, the link you include in your post is from the year 2014... it's 2020 now, so that's 6 (!!) years ago. We all know that that's 99 years in front-end terms.

 

I don't see 2104. I do see that it was lasted updated in 2019. Regardless of the date, the information is still relevant in current year.

 

25 minutes ago, Friebel said:

So you want to proof something is running or not running in Internet Explorer and now you make a codepen as a demo?

First, the Greensock website throws an error in IE11, because it's using 'foreach' which IE11 doesn't support.

 

I don't know why you are directing that at me. I even don't work for greensock. IE11 supports forEach, just not on a nodelist. Probably something @ZachSaucier should look at.

 

6 minutes ago, Friebel said:

Codepen just doesn't work in IE. Maybe if you have a PRO version you can use it, but I don't have it and my guess is you don't either.

 

For IE, you need to open it in debug mode. I didn't provide the link because I didn't think it was necessary as the behavior is the same as Edge.

https://cdpn.io/osublake/debug/d84560d06bad8055fe0154ed60e9620c

 

16 minutes ago, Friebel said:

Also, you are talking about the old Edge which is not supported anymore and it is replace with the same name (Edge) by the Chromium version? Sorry, but the old Edge is totally irrelevant now. Espectially when every modern browsers has auto update these days.

 

Does that mean that IE isn't relevant?

 

32 minutes ago, Friebel said:

On topic again please: there's an issue in Draggable that needs to be fixed. See my previous post for a direction. Have a nice weekend!

 

It's being looked at. 

  • Like 4
Link to comment
Share on other sites

Alright, I figured out that if I copy the transforms to a proxy element that's NOT in the DOM and run the consolidate() on that instead of the original element, it seems to work around Firefox's bug. Here's an updated Draggable that seems to work fine in your demo @Friebel - are you seeing the same thing?: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js

  • Like 2
Link to comment
Share on other sites

20 hours ago, GreenSock said:

Alright, I figured out that if I copy the transforms to a proxy element that's NOT in the DOM and run the consolidate() on that instead of the original element, it seems to work around Firefox's bug. Here's an updated Draggable that seems to work fine in your demo @Friebel - are you seeing the same thing?: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js

I just tried the new Draggable you posted by overwriting the Draggable in the codepen, but it still doesn't work in Firefox.

Link to comment
Share on other sites

1 hour ago, Friebel said:

I just tried the new Draggable you posted by overwriting the Draggable in the codepen, but it still doesn't work in Firefox.

Hm, I wonder if you didn't clear your cache? I just tested again and it works great in Firefox on Windows 10 via touch for me: 

See the Pen MWwOxod by GreenSock (@GreenSock) on CodePen

 

Can anyone else confirm that even that's not working after clearing your cache? @OSUblake

  • Like 2
Link to comment
Share on other sites

4 minutes ago, GreenSock said:

Hm, I wonder if you didn't clear your cache? I just tested again and it works great in Firefox on Windows 10 via touch for me: 

 

 

Can anyone else confirm that even that's not working after clearing your cache? @OSUblake

The demo you supply now does work in Firefox. The Draggable file you posted before didn't solve the issue by replacing the Draggable on the codepen with the new Draggable, as I wrote above. I think it's a pitty you don't trust me in clearing cache. I'm only a senior developer with over 20 years of experience. But that feeling I'm getting more often here lately. To the point I'm starting to wonder why I still post these bug issues in gsap here.

Link to comment
Share on other sites

3 minutes ago, Friebel said:

The demo you supply now does work in Firefox. The Draggable file you posted before didn't solve the issue by replacing the Draggable on the codepen with the new Draggable, as I wrote above.

It's the same Draggable file! I merely forked your version that had the old version, dropped in the new one and posted it here. See why I was confused? 

 

4 minutes ago, Friebel said:

I think it's a pitty you don't trust me in clearing cache. I'm only a senior developer with over 20 years of experience. But that feeling I'm getting more often here lately. To the point I'm starting to wonder why I still post these bug issues in gsap here.

Gosh, it sounds like you're taking this very personally. I'm baffled - is there some other way I could have responded that wouldn't sound like an attack on you as a developer or something? I sure didn't mean it that way. I'm just trying to figure out what's going on and help with the Firefox bug you stumbled across (which isn't a Draggable bug at all, as evidenced above). 

 

I definitely value you posting about any bugs you come across here, and I sure hope you see that I'm committed to promptly fixing anything I possibly can. I've spent many hours on this, and it's not even a Draggable bug! I'm relatively sure I figured out a workaround too and delivered it on a weekend. 

 

Oh, and thanks so much for providing the reduced test case originally. Super helpful. 🙌

  • Like 3
Link to comment
Share on other sites

4 hours ago, GreenSock said:

Can anyone else confirm that even that's not working after clearing your cache? @OSUblake

 

Works fine for me.

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

This fix is in the latest release that we just pushed out officially (3.2.5). Firefox also says they've got a browser-level fix in place (not sure it's released quite yet, but it's in the nightly builds or whatever). 

  • Like 2
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.
×