preventDefault() is no longer supported during TouchMove

[zrisher]

What should happen?

When using an Orbit component in a mobile browser, when scrolling through slides, no vertical scroll should occur and no console warnings should appear.

What happens instead?

Vertical scrolling occurs (in addition to the slide scroll), and the following appear appears in the console:

[Intervention] Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

Why does this happen?

This error is raised by e.preventDefault() in foundation.util.touch, because preventDefault can no longer be called during TouchMove or TouchEnd on mobile devices for Chromium and likely other browser engines, even if those handlers are marked with passive: false.

The documentation on this is not easy to come by, and is occasionally contradictory. Through my own testing I confirmed that this error occurs when preventDefault is used during either the touchmove or the touchend event. touchstart is unfortunately too early for us to detect if the touch motion meets our configured detection parameters.

Possible Solution

Unfortunately this appears to require a significant rewrite in the logic of foundation.util.touch.

An example working implementation can be found within the Flickity library, but it uses a pretty different approach to detecting and handling the related events.

Test Case and/or Steps to Reproduce (for bugs)

Test Case: Copy this gist to your desktop. With this you can skip steps 1 - 3 below.

Note: I tried making an example in CodePen, but it kept capturing the touch scroll events to open its own back-button panel.

How to reproduce:

1. Copy the HTML Starter Template from https://get.foundation/sites/docs/installation.html and follow the CDN installation instructions.
2. Add the first Orbit example from https://get.foundation/sites/docs/orbit.html
3. Optionally contain the page content and add a tall div to scroll.
4. Open Chrome Dev Tools and enable Mobile Device Emulation
5. Attempt to scroll through the slider

Context

I wanted to stop the vertical scrolling that occurs when a user interacts with the carousel on this page on mobile.

Your Environment

• Foundation version(s) used: 6.8.1
• Browser(s) name and version(s): latest Chrome, latest Safari
• Device, Operating System and version: latest Windows
• Link to your project: Private

Checklist

• I have read and follow the CONTRIBUTING.md document.
• There are no other issues similar to this one.
• The issue title and template are correctly filled.