Draggable Chrome

[stereoS]

Hi, 

 

First of all, thank you so much for your amazing support, it helped me a lot of times.

 

I have a problem with Draggable / ThrowPropsPlugin, only on Chrome, and I can’t figure why. Sometimes, the slider don’t move when I drag it although the onDragStart event is called.

 

I made a Codepen here : .

 

Can someone take a look ?

 

Thank you

See the Pen KaKggM by adrienlementheour (@adrienlementheour) on CodePen.

[PointC]

Hi stereoS 

 

I took a look at your pen in Chrome and tried it several times. I didn't have any problems at all. I also tried in FF and Edge. All seemed fine to me. I don't think it has anything to do with what you're seeing, but you have an older version of Draggable on the pen (1.17). You can switch to the latest version:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/utils/Draggable.min.js"></script>

What version of Chrome are you using? Maybe others can try it and see if they see the issue.

 

Happy tweening.

[stereoS]

Thank's for your help PointC  , I switched Draggable to the last version but I still have the problem on Chrome. It only happens when I don't move the cursor before dragging the element. I had it tested by two other colleagues, and they have the same issue...

 

My Chrome version is 55.0.2883.95

[GreenSock]

Try setting allowNativeTouchScrolling:false on the Draggable.

 

Apparently Chrome recently changed the way they handle mouse/touch events, adding "pointer" events in addition to "mouse" ones. Draggable had some code that attempts to discern directional movement on touch devices (ones with events that start with "touch" or "pointer") so that if you've got an instance that only allows dragging on one axis (like horizontally), but the user initially starts dragging on the opposite axis (even a tiny bit), it'd lock it in that axis and allow native touch scrolling (that's the only way to do it). And there are bugs in some Android browsers that required special workarounds as well in that code. Otherwise, you couldn't really scroll natively while touching the Draggable instance. Chrome's new pointer behavior is making it seem like you're attempting to touch-scroll in these cases. 

 

I added some extra conditional logic in the upcoming Draggable to help work around this new Chrome behavior. You can preview that (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

 

Better? 

[vamtam]

Hi, we have encountered a related issue.

 

This one only happens on Chrome 55 with touch events (regular mouse clicks are fine). I've created a minimal demo + instructions for reproducing the problem here:

See the Pen qRBwEV by nyordanov (@nyordanov) on CodePen.

 

Our current workaround is to add a 100ms delay between the click and the opening of the submenu, but we'd be grateful if you could offer a permanent solution.

[stereoS]

It works when I set allowNativeTouchScrolling to false, or when I use the upcoming version of Draggable, thank you Jack for clearing that up!

[Pete Barr]

Hi guys, yeah I can't get it to work either on the latest Chrome with mobile touch events enabled. I've added in the allowNativeTouchScrolling: false to no avail, unless I'm being a dope of course.

 

See the Pen 3774beda5ee9cbb2d77b8f2ec78306af by petebarr (@petebarr) on CodePen.

 

Please help 

[GreenSock]

Hmm, I'm gonna need some time to dig into that and figure out what exactly is going on. Chrome has been messing with the behavior of their pointer events quite a bit. 

[Jonathan]

Pete Barr

 

Also are you seeing this in latest Chrome on Windows or on latest Chrome on Mac?

 

[GreenSock]

This one took a while to track down (sorry for the delay) - it looks like a bug in some browsers that don't properly apply the touch-action on SVG elements. To work around the browser bugs, the upcoming release of Draggable applies it to the root <svg> element as well which seems to work. You can preview it (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

 

@Pete Barr that should resolve things for you, but you could also just manually apply touch-action:none to your <svg>. 

 

Better? 

[chrisgannon]

Hey Jack,

 

I'm running into this issue too with Spin2Win Wheel. All reports of Draggable not working are coming from Android users running Chrome. I just tried this beta version of Draggable and that has fixed it! Is this version of Draggable distributable yet? I need to offer a fix to customers sharpish.

[GreenSock]

We are indeed hoping to push 1.20.0 out by the end of this week at the latest. Feel free to use that beta if you want for now.