Friebel Posted March 6, 2020 Share Posted March 6, 2020 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 1 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 6, 2020 Share Posted March 6, 2020 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 More sharing options...
Friebel Posted March 6, 2020 Author Share Posted March 6, 2020 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 1 Link to comment Share on other sites More sharing options...
OSUblake Posted March 6, 2020 Share Posted March 6, 2020 Can confirm. Something @GreenSock needs to look into. 1 1 Link to comment Share on other sites More sharing options...
Friebel Posted March 6, 2020 Author Share Posted March 6, 2020 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 1 Link to comment Share on other sites More sharing options...
OSUblake Posted March 6, 2020 Share Posted March 6, 2020 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. 2 Link to comment Share on other sites More sharing options...
Friebel Posted March 6, 2020 Author Share Posted March 6, 2020 @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 More sharing options...
OSUblake Posted March 6, 2020 Share Posted March 6, 2020 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); } 2 Link to comment Share on other sites More sharing options...
Friebel Posted March 6, 2020 Author Share Posted March 6, 2020 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 More sharing options...
OSUblake Posted March 6, 2020 Share Posted March 6, 2020 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 2 Link to comment Share on other sites More sharing options...
Friebel Posted March 6, 2020 Author Share Posted March 6, 2020 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 More sharing options...
Friebel Posted March 6, 2020 Author Share Posted March 6, 2020 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 More sharing options...
OSUblake Posted March 6, 2020 Share Posted March 6, 2020 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. 4 Link to comment Share on other sites More sharing options...
GreenSock Posted March 7, 2020 Share Posted March 7, 2020 This is definitely a Firefox bug. Here's proof: See the Pen WNvXzYW?editors=0010 by GreenSock (@GreenSock) on CodePen I'm not sure yet what I can do inside Draggable to work around it. Still pondering. I filed a bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1620787 2 Link to comment Share on other sites More sharing options...
GreenSock Posted March 7, 2020 Share Posted March 7, 2020 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 2 Link to comment Share on other sites More sharing options...
Friebel Posted March 8, 2020 Author Share Posted March 8, 2020 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 More sharing options...
GreenSock Posted March 8, 2020 Share Posted March 8, 2020 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? 2 Link to comment Share on other sites More sharing options...
Friebel Posted March 8, 2020 Author Share Posted March 8, 2020 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 More sharing options...
GreenSock Posted March 8, 2020 Share Posted March 8, 2020 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. 🙌 3 Link to comment Share on other sites More sharing options...
OSUblake Posted March 8, 2020 Share Posted March 8, 2020 4 hours ago, GreenSock said: Can anyone else confirm that even that's not working after clearing your cache? @OSUblake? Works fine for me. 3 Link to comment Share on other sites More sharing options...
GreenSock Posted March 20, 2020 Share Posted March 20, 2020 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). 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now