Jump to content


Draggable onClick issues on Chrome 55 (touch)

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



I originally posted this as a reply to another topic, but it has since been marked as "Answered" and it got buried. So, I figure it's best to post a new topic for this issue.


Essentially, event.preventDefault() in Draggable's onClick callback no longer works in Chrome 55.


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


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.

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

Link to comment
Share on other sites

I'm afraid that this is still broken:

See the Pen RKPMvZ by nyordanov (@nyordanov) on CodePen

The problem only appears if you tap on "Open submenu". Regular mouse clicks are fine. Emulated touch events are also broken, so you can use that for testing.

Link to comment
Share on other sites

Ugghh... I feel for you Jack. Sorting out all this out looks painful. 


You may find these links useful. It's the best resource I know of for touch/pointer events... although it hasn't been updated since October.





Link to comment
Share on other sites

I believe it's resolved now. Please take a peek. 

  • Like 1
Link to comment
Share on other sites

Hi Jack,


I'm sorry to keep bugging you with this, but we found a few more edge cases:


1. The fix doesn't seem to work if allowNativeTouchScrolling is true - we still get both the MouseEvent and the PointerEvent. This is not huge a problem for us, I just wanted to let you know about this issue.


2. There is still something wrong with the events, although I'm still trying to figure out a test case. However, you can see here -

See the Pen PWGZeW by nyordanov (@nyordanov) on CodePen

- that the inner link becomes focused when you tap on "Open submenu".

Link to comment
Share on other sites

At this point, I have no earthly idea how to deliver all of those behaviors. Some seem fundamentally incompatible. For example, in order to permit touch-scrolling in the one direction, we cannot call preventDefault() on the touchdown/pointerdown event but to prevent the link activation, it seems to necessitate calling preventDefault(). We either call it or don't :(


We've already done quite a bit of fancy-footwork under the hood to get around a bunch of browser bugs/inconsistencies and normalize behavior, but in this case I can't see a solution. Of course you could just solve the problem by manually altering the blur/focus state that's causing problems for you. Or disable native touch scrolling. 


Sorry I don't have a great/easy solution that can be baked into Draggable here. If you (or anyone) have any suggestions, I'm all ears. 

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.