Jump to content
Search Community

Draggable lockAxis not working on IOS Safari

Kári Bertilsson test
Moderator Tag

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

There seems to be some general weirdness with the overflow-x on iOS. When I test your demo in my iPad, it's just letting the width of the page go out to the full width of the wrapper with all the boxes. I'm no iOS expert, but a Google search showed a few results for overflow-x not being respected. 

 

So for your Draggable question — you want the user to be able to press the draggable element and scroll up/down, but once you start dragging left/right you want that up/down scroll to stop? Is there a reason the user needs to be able to scroll the page up and down by pressing the draggable element? I ask because  allowNativeTouchScrolling: false would work great for this. 

  • Like 3
Link to comment
Share on other sites

I am using Draggable on a React component and managed to get this working correctly on IOS by wrapping the React component in double <NonPassiveTouchTarget /> from https://gist.github.com/xiaody/206c4168f9001671c0a374af4558f582

 

On android the "lockAxis: true" works, but on IOS it does not work unless i use the wrapper also.

 

I would love to get rid of that boilerplate code, so hope this will be fixed in GSAP. I would expect lockAxis to work the same on both platforms.

  • Like 2
Link to comment
Share on other sites

  • 1 month later...
On 8/24/2019 at 8:26 AM, Kári Bertilsson said:

Are there any plans to make this work correctly out of the box with GSAP ?

I'm so sorry for the tardy reply! We've been heads-down on GSAP 3 and this fell through the cracks. Please accept my apologies.

 

I think the issue may actually be related to some issues in iOS and a workaround could be adding a "touchforcechange" listener to the draggable element. Does this (uncompressed) updated version work any better for you?: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

Link to comment
Share on other sites

  • 1 month later...

I'm dealing with the same issue. Setting allowNativeTouchScroll to false on my draggable doesn't seem to work on the latest iOS. And I just tried your Draggable beta, but it doesn't seem to have changed anything on my end. Would love a solution for this! Thanks!

Link to comment
Share on other sites

14 hours ago, Vic Emond said:

I'm dealing with the same issue. Setting allowNativeTouchScroll to false on my draggable doesn't seem to work on the latest iOS. And I just tried your Draggable beta, but it doesn't seem to have changed anything on my end. Would love a solution for this! Thanks!

Hey @Vic Emond. Did you use allowNativeTouchScrolling (you misspelled it)? If you're still having trouble, please provide a reduced test case so that we can try to replicated it on our end or identify why yours isn't working properly (like a typo ;) ) 

Link to comment
Share on other sites

20 hours ago, GreenSock said:

Hey @Vic Emond. Did you use allowNativeTouchScrolling (you misspelled it)? If you're still having trouble, please provide a reduced test case so that we can try to replicated it on our end or identify why yours isn't working properly (like a typo ;) ) 

 

Phew...I didn't misspell that property. You had me worried that it was going to be a dumb mistake (although it might be some other dumb mistake).

 

I am using this to create the draggable gallery:

oGallery = Draggable.create( $('.slider div.wrapper'), { type: 'left', edgeResistance: .75, bounds: $('div.slider'), lockAxis: true, dragClickables: true, allowNativeTouchScrolling: true, throwProps: true, snap: { left: function(nEndValue){ return Math.round(nEndValue / nGalleryWidth) * nGalleryWidth } } } );

 

And you can see it in place on my dev site here: http://maw.netingredients.com. On mobile (at least on my iPhone running the latest iOS), the slightest deviation from swiping left to right on the gallery causes the native vertical scrolling to happen. So, in turn, swiping the gallery left or right can be difficult or a little wonky. I was hoping to get this to perform more like how the Instagram app works, for example. You can scroll up and down just fine, even if there are posts with multiple photos that allow you to swipe between them left to right. And when you are swiping left to right, there isn't any conflict with scrolling up and down. I realize that is an app and there is tighter control over event handling, but I was hoping I could make some improvements over what I've currently got.

 

If you need more of a simplified test case to help me identify a solution, I'd be happy to throw one together. Thanks!

Link to comment
Share on other sites

Yeah, it's tough to troubleshoot a live site like that since we can't tweak values and see what happens, plus there are a bunch of other variables in the mix. 

 

First, are you positive you tried the latest beta, with a hard-refresh? https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

 

I did a quick test on my iPhone (latest beta) and it seemed to handle the vertical scrolling and the side-swiping perfectly. I'm not sure what else might be interfering in your live site. A reduced test case in codepen would go a long way in helping to identify any issues. 

  • Like 1
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...