Jump to content
Search Community

Cross browser issues with draggable and allowNativeTouchScrolling

tsneddon test
Moderator Tag

Recommended Posts

Here's a CodePen illustrating an issue that I've struggled with on and off again for a couple of years now. I'm not sure if these struggles are due to my misunderstanding, or if there is a problem with Draggable.js.

 

This first demo is using the latest version of gsap and the beta version of draggable. I'll add a reply with a demo and analysis of version 3.0.2, which behaves differently.

 

The menu pulls out from the left. (Could be a little more refined, but it works for this demo.)

The shaded gray region at the right of the menu is a little grab bar that protrudes when the menu is closed.

The button in the middle toggles allowNativeTouchScrolling for the draggable menu.

For testing on Android and iOS you'll probably need to use the debug view of the codepen in order to fit everything properly.

 

Here are my testing results (beta Draggable):

Android: allowNativeTouchScrolling = false

No scroll (expected).

Drag works.

Changing axis of drag motion to vertical during a drag event does not release drag. This is what I would expect.

 

Android: allowNativeTouchScrolling = true

Scroll works.

Changing axis of scroll motion to horizontal during a scroll event does not release scroll. This is what I would expect.

Can't drag menu. Draggable releases from touch after moving a very short distance.

 

iOS: allowNativeTouchScrolling = false

No scroll (expected)

Drag works.

Changing axis of drag motion to vertical during a drag event does not release drag. This is what I would expect.

 

iOS: allowNativeTouchScrolling = true

Scroll works.

Changing axis of scroll motion to horizontal during a scroll event does not release scroll. This is what I would expect.

Drag works.

Changing axis of drag motion to vertical during a drag event does not release drag. This is what I would expect.

 

Windows (Chrome, touch screen): allowNativeTouchScrolling = false

No scroll (expected).

Drag works.

Changing axis of drag motion to vertical during a drag event does not release drag. This is what I would expect.

 

Windows (Chrome, touch screen): allowNativeTouchScrolling = true

Scroll works.

Changing axis of scroll motion to horizontal during a scroll event does not release scroll. This is what I would expect.

Can't drag menu. Draggable releases from touch after moving a very short distance.

 

 

See the Pen eYpQbNr by t-sneddon (@t-sneddon) on CodePen

Edited by tsneddon
Added "Chrome" to Windows for clarification.
Link to comment
Share on other sites

Here are my testing results (3.0.2)

Android: allowNativeTouchScrolling = false

Scrolls. This is not expected.

Drag broken.

Draggable releases from touch after moving a very short distance.

Can't drag menu unless you grab it from the grey grab bar.

 

Android: allowNativeTouchScrolling = true

Scroll works.

Changing axis of scroll motion to horizontal during a scroll event does not release scroll. This is what I would expect.

Drag broken.

Draggable releases from touch after moving a very short distance.

Can't drag menu unless you grab it from the grey grab bar.

 

iOS: allowNativeTouchScrolling = false

Scrolls. This is not expected.

Drag mostly works.

Changing axis of drag motion to vertical during a drag event releases the drag event and begins native scrolling.

 

iOS: allowNativeTouchScrolling = true

Scroll works.

Changing axis of scroll motion to horizontal during a scroll event does not release scroll. This is what I would expect.

Drag mostly works.

Changing axis of drag motion to vertical during a drag event releases the drag event and begins native scrolling.

 

Windows (Chrome, touch screen): allowNativeTouchScrolling = false

Scrolls. This is not expected.

Drag broken.

Draggable releases from touch after moving a very short distance.

Can't drag menu unless you grab it from the grey grab bar.

 

Windows (Chrome, touch screen): allowNativeTouchScrolling = true

Scroll works.

Changing axis of scroll motion to horizontal during a scroll event does not release scroll. This is what I would expect.

Drag broken.

Draggable releases from touch after moving a very short distance.

Can't drag menu unless you grab it from the grey grab bar.

 

See the Pen wvKRogj by t-sneddon (@t-sneddon) on CodePen

 

Edited by tsneddon
Added "Chrome" to Windows for clarification.
Link to comment
Share on other sites

I'm not a fan of browser-specific conditionals, but this addition is a workaround for the drag detaching on Android touch screen if allowNativeTouchScrolling is set to true in the draggable. Windows touch screen is still broken.

 

The conditional is necessary because the addition to onDragStart breaks iOS and it won't scroll at all, no matter what allowNativeTouchScrolling is set to.

 

Insert this at the beginning,

var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);

and then this when defining the draggable menu.

  onDragStart: function(e) {
    if (!iOS) {
      $("#menu").off("touchmove").on("touchmove", function(event) {
          event.stopImmediatePropagation();
          event.stopPropagation();
          event.preventDefault();
      });
    }
  },
  onDragEnd: function(e) {
    if (!iOS) {
      $("#menu").off("touchmove");
    }
  },

 

Here's a codepen that includes these changes.

See the Pen mdevZKG by t-sneddon (@t-sneddon) on CodePen

  • Like 1
Link to comment
Share on other sites

  • 5 months later...

I'm so sorry for the tardy response. Yes, I managed to track down and work around some odd behavior on Android and MS browsers that should improve things. I forked your demo and dropped in the latest beta and it seems to work better; agreed? 

See the Pen 9f19d6fc698e0973002b2c2bf6e26cb8?editors=0010 by GreenSock (@GreenSock) on CodePen

 

FYI, Android was firing BOTH touchstart AND pointerdown events (with different identifiers) and then only pointermove events thereafter. Also, it was firing pointercancel events when you start dragging horizontally even though Draggable specifically set touch-action to pan-y. Turns out in your scenario it was a child element that had the scrolling content, and the browser ignored the parent's touch-action, so you'd need to set it to pan-y on ".content-wrapper" to prevent the pointercancel event (which kills all dragging of course). To resolve that, the new Draggable applies the touch-action to ALL child elements. 

 

Let me know if it behaves better for you now. 

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