Jump to content
Search Community

Draggable Chrome

stereoS test
Moderator Tag

Go to solution Solved by GreenSock,

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

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

Link to comment
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
Link to comment
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

Link to comment
Share on other sites

  • Solution

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
Link to comment
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:

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.

Link to comment
Share on other sites

  • 3 months later...
  • 4 weeks later...

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? 

Link to comment
Share on other sites

  • 4 weeks later...

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.

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...