Jump to content
GreenSock

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

SVG + Draggable + Chrome Android = Problems

Recommended Posts

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

Link to comment
Share on other sites

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] }
});

.

  • Like 2
Link to comment
Share on other sites

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

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

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

 

.

  • Like 1
Link to comment
Share on other sites

Yes, that did the trick. Thanks!

Link to comment
Share on other sites

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 :blink:

  • Like 1
Link to comment
Share on other sites

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/

 

.

  • Like 1
Link to comment
Share on other sites

  • 3 months later...

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