Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Kári Bertilsson

Draggable lockAxis not working on IOS Safari

Recommended Posts

The codepen is for some reason actually not working on my IOS. But works on android, desktop etc.

 

The issue on IOS is that when dragging the carousel to left or right, the axis is not locked and the page scrolls up/down when only trying to swipe left/right.

See the Pen qBWNEjp by karibertils (@karibertils) on CodePen

Share this post


Link to post
Share on other sites

Hi @Kári Bertilsson :)

 

Welcome to the forum and thanks for joining Club GreenSock.

 

Have you tried:

allowNativeTouchScrolling: false

Does that help?

 

Happy tweening and welcome aboard.

:)

 

  • Like 3

Share this post


Link to post
Share on other sites

Hi @PointC

Thanks for quick reply.

 

Quote

allowNativeTouchScrolling: false

 

This works to disable native touch scroll completely over the element.

But i need the native up/down touch scroll to work unless dragging has started.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Yes, the carousel fills approx the entire screen height on mobile phones, so with "allowNativeTouchScrolling: false" after the user has scrolled down to the carousel he is effectively stuck there and can't go up/down anymore.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×