Jump to content

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

Draggable + Chrome = Slight wonky behaviour

Recommended Posts

If someone else could check this for me, we could try and figure out if this is a bug or not.


I've tried Safari, Firefox, Chrome, Opera in a Mac. I can see this behaviour in Chrome and Opera (blink-based issue maybe?).


The catch here is that I am using a dummy DOM element to calculate a velocity to move the THREEJS camera with. 


Currently the dragging is locked in the x-axis. I don't know if this will go away when I start using both axis. To reproduce, open the codePen, move the dummy draggable (dark tinted element, it covers the whole canvas). If you move the dummy vertically before moving horizontally, nothing will move. If you move it horizontally first, it will move as expected.

See the Pen vZrQLy by dipscom (@dipscom) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


What foul concoction is this mixing of Draggable and Three.js?


Sweet demo.


It appears you have unveiled an inconsistent behavior in Chrome as I was able to replicate in a very simple demo too.

I'll shoot this over to Jack to investigate further.


In demo below, in Chrome, if you drag vertically first the element will not follow horizontal movement.


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



I think I found a viable solution for the time being. If you set the type to "x,y" you can then use liveSnap to always set the y to the current y (no change in vertical position)


	y:function() {
		return this.y;


I went to great lengths to fork your demo and apply this technique:


See the Pen BZVMVp?editors=0010 by GreenSock (@GreenSock) on CodePen


Thanks again for the demo and report. We will get back to you mighty mixer of technologies!

  • Like 3
Link to comment
Share on other sites

Mighty @Carl I thank thee for the humiliation of being shown how it is done and made to perform at the golden 60fps!


You must forgive us noobs who don't know better and think we should use things in conjunction as this GSAP black wizardry is beyond my level of comprehension.


But one must find a niche where @OSUblake is not already proficient in (at least not to my knowledge) to try and stay relevant.


Not to mention that PIXI.js is the new "thing". You know me, never playing with the cool kidz.


  • Like 1
Link to comment
Share on other sites

This has to do with native touch-scrolling. Chrome has introduced those pesky PointerEvents in addition to MouseEvents which makes it ACT like it’s a touch device. allowNativeTouchScrolling is true by default, thus if you start dragging vertically it’ll interpret that as if you want to scroll the page and it cancels the drag event. It's trying to be helpful. :)


For now, the solution is as simple as setting allowNativeTouchScrolling:false but I’ll try to figure out a way to sense this condition and behave accordingly, but it’s definitely tricky. I’m contemplating a change to the default behavior being allowNativeTouchScrolling:false but that could be a bummer for some people who depend on the old default (probably somewhat rare). 

  • Like 4
Link to comment
Share on other sites

As long as you're aware of this behaviour, it's as good as solved.

Link to comment
Share on other sites

Where's the 'mark as solved button'?

Link to comment
Share on other sites

Hey Pedro,


The mark as solved / best answer button is unfortunately gone. Our updated forums software only allows topics (discussion threads like we have now) or questions (more like stackoverflow where you can up-vote / down-vote things).


We tested out the questions but we preferred the chronological order that topics allowed us to maintain (especially since some discussions can span multiple pages). With questions, each reply could be moved (depending on votes) and it was a bit of a mess. Only a question can be solved or have a best answer :-( 

Link to comment
Share on other sites

'Kay, boss. Gotcha.

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.