stereoS

Draggable Chrome

Recommended Posts

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 : http://codepen.io/adrienlementheour/pen/KaKggM.

 

Can someone take a look ?

 

Thank you

Share this post


Link to post
Share on other sites

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.

:)

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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? 

  • Like 4

Share this post


Link to post
Share on other sites

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: http://codepen.io/nyordanov/pen/qRBwEV

 

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.

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

Pete Barr

 

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

 

:)

Share this post


Link to post
Share on other sites

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? 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. 

  • Like 2

Share this post


Link to post
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.