Touch swipe does not work safari and chrome on IOS

[mosstly-design]

Describe the bug Touch swipe does not work safari and chrome on IOS

To Reproduce Steps to reproduce the behavior:

1. Open any site that uses Hooper on an iPhone. Use either the Chrome or Safari app to pull up sed website
2. Try to swipe through the slideshow with your finger.
3. The sliders will not switch like they're supposed to.

Expected behavior Sliders should respond to a swipe of the finger, left or right, on your phone

Screenshots If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• OS: IOS
• Browser: chrome, safari. It works on the BRAVE IOS browser

Additional context

There was a similar issue with Flickity that was fixed.

[ismail9k]

I have tested it on iPhone 6 Plus, iOS version 12.2, on both Chrome and Safari, touch events works fine for carousels that enable it. Can you provide me with more details about testing mobile and software version?

[mosstly-design]

Thanks for the response. You can see my site mosstly.com. It's so strange, because it does not work for my site mosstly.com, yet I can get your Hooper examples to work fine on my phone. I'm using iPhone xr IOS 12.3.1

[johnroberts]

I have the same or similar problem.

iPhone 5s iOS 12.3.1 Safari or Chrome iPhone 6 iOS 12.3.1 Safari (Chrome not tested) Works great on Android.

The first slide is shown, swiping right to the second slide works, then swiping stops working, cannot swipe left or right.

In my test case there are three slides.

The navigation buttons continue to work.

I also tried using the infiniteScroll prop. When it is set to true, swiping doesn't work at all on iOS.

Thanks for writing this component!

Here is the vue file I am using:

<template>
  <div class="home">
    <h2>Your Impact</h2>
    <Hooper>
      <Slide v-for="(organization, index) in impact.organizations" :key="index" :index="index">
        <div>
          <img alt="" :src="organization.logo">
        </div>
        <h3>{{ organization.name }}</h3>
        <hr>
        <h3>Amount Donated</h3>
        <h3>${{ organization.donation }}</h3>
        <hr>
        <h3>Reach</h3>
        <h3>{{ organization.reach }} people</h3>
        <hr>
        <h3>Your Invite Link</h3>
        <h4 id="invite_link">{{ organization.invite_link }}</h4>
      </Slide>
      <HooperNavigation slot="hooper-addons"></HooperNavigation>
      <HooperPagination slot="hooper-addons"></HooperPagination>
    </Hooper>
  </div>
</template>

<script>
// @ is an alias to /src
import {
  Hooper,
  Slide,
  Navigation as HooperNavigation,
  Pagination as HooperPagination
  } from 'hooper';
import 'hooper/dist/hooper.css'

export default {
  name: 'Home',
  components: {
    Hooper,
    Slide,
    HooperNavigation,
    HooperPagination
  },
  data: function() {
    return {
      impact: {
          reach: 226,
          donation: 2588.94,
          organizations: [
            {
              id: "5",
              name: "Maryland Food Bank Kids",
              logo: "img/maryland_food_bank_logo.jpg",
              cause: "2",
              reach: 226,
              donation: 2588.94,
              invite_link: "https://fundup.app/invite/10/5",
              url: "https://myphonefeedskids.com/nonprofits-maryland-food-bank/"
            },
            {
              id: "6",
              name: "Columbia Festival of the Arts",
              logo: "img/cfa_logo.png",
              cause: "5",
              reach: 0,
              donation: 0,
              invite_link: "https://fundup.app/invite/10/6",
              url: "https://columbiafestival.org/about/"
            },
            {
              id: "76",
              name: "Foo Festival of the Arts",
              logo: "img/icons/android-chrome-512x512.png",
              cause: "5",
              reach: 0,
              donation: 0,
              invite_link: "https://fundup.app/invite/10/76",
              url: "https://columbiafestival.org/about/"
            }
          ]
      }
    }
  }
}
</script>

<style>
img {
  max-width: 30%;
}
hr {
  max-width: 50%;
}
#invite_link {
  text-align: center;
}
</style>

[ismail9k]

Thank you for validation the issue we will work on it.

[johnroberts]

Thank you very much!

[ismail9k]

Fixed in #101