SVG + Draggable + Chrome Android = Problems

[rag]

Hi guys,

I set up a very minimal test case here: 

Setting up a draggable with type x or y on an SVG element causes a problem on Chrome on Android: I can't move the element more than a couple px at a time, and the drag is not smooth. I can see this behaviour on multiple Android devices.

 

I first thought this might have to do with the fact that in Chrome, GSAP uses CSS transforms in SVGs instead of attributes, but since that changed in the last version and the problem still persists, I guess it's something else.

 

In this case I could simply use a proxy object and set the cx/cy values of the circle, but the project I'm working on is much more complex, so I'd like to avoid that if possible. Do you have any ideas on how to fix this?

Thanks!

See the Pen pRpPOX by mbuesing (@mbuesing) on CodePen

[OSUblake]

Chrome 55 added PointerEvents, which has been causing some problems with earlier versions of Draggable.

https://greensock.com/forums/topic/15736-draggable-onclick-issues-on-chrome-55-touch/

 

Try using a cache busting url for your Draggable script, and the problem should go away...

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/utils/Draggable.min.js?v=1

See the Pen rjpRGj?editors=1010 by osublake (@osublake) on CodePen

 

If you're still having trouble, you could do this as temporary workaround to lock an axis.

var drag = new Draggable('#circle', {
  liveSnap: { y: [0] }
});

.

[rag]

Hmm, both these options don't help with this problem.. You can test it yourself here:

Also tried the cache busting url, also clearing the cache in the browser, still the same behaviour.

What does help is using a static trigger element, in this case for example the entire svg. It needs to be as big as the drag can go to work.

In my case that's not an option though, as there are multiple draggables on the page and the trigger elements need to move with them.

I tried the proxy element, that also didn't work.. Do you have any other ideas? I realize this is because of a change in Chrome, but the codepen is a really simple (and I guess common) case that shouldn't make problems IMHO.

[OSUblake]

You know what? I didn't notice the problem at first because I was using Samsung's Browser, which isn't using the latest version of Chromium. Now I see it. I tried a bunch of different workarounds, but they all produced the same result. Had problems on a touch monitor too. Definitely an issue. I'll let them know. 

[rag]

Cool, thanks, I'll keep an eye on this thread!

[OSUblake]

I don't know if @@GreenSock has had a chance to look at this yet, but I think I figured out the problem. Chrome is not respecting the touch-action property for elements inside an SVG. It might be a bug with Chrome as this does not appear to be an issue with IE/Edge.

 

Adding the touch-action property to the root SVG element seems to fix the problem. Dragging #1 causes scrolling to occur, which should not be the case. It should behave the same as #3, which uses a div.

See the Pen b22b091009ecab25ea5ca190d3f54496 by osublake (@osublake) on CodePen

 

 

.

[rag]

Yes, that did the trick. Thanks!

[Jonathan]

It looks like in Chrome 55 changed where the pageX and pageY reference resides in the Event handler. Previously before that Chrome 55 change of adding PointerEvents, it was like event.pageX. But now Chrome 55 has the pageX inside event.originalEvent .. i.e .. event.originalEvent.pageX. That is at least what i have gathered from testing and pulling my eyes out from this addition of PointerEvents

[OSUblake]

Sounds like you might be looking at a jQuery event object. A PointerEvent extends a MouseEvent, so it will have everything a mouse event has, including pageX, pageY. PointerEvents have been used by IE/Edge for years, so it's nothing new.

 

Check out this link for the proper way to use them in-place of mouse and touch events.

https://developers.google.com/web/fundamentals/design-and-ui/input/touch/

 

.

[GreenSock]

Great catch, Blake. Definitely seems like a bug in Chrome, but I went ahead and applied a workaround in the next version of Draggable which you can preview (uncompressed) at: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

 

Better?