Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: ion-slide swipe and click #17981

Closed
kalicki opened this issue Apr 6, 2019 · 8 comments

Comments

Projects
None yet
2 participants
@kalicki
Copy link

commented Apr 6, 2019

Bug Report

Ionic version:
[x] 4.2.0

Current behavior:
Hey, has a bug in ion-slide when I do a swipe and hold and click at the same time it shows error in the transform

Video:
https://streamable.com/1evdl

Screenshot:
Screenshot_20190405-111834_Cooktop

Steps to reproduce:
Swipe to right/left and click with swipe active

Related code:

Simple code:

<ion-slides pager="false" [options]="slideOptions" #tagSlides>
        <ion-slide *ngFor="let tag of tags">
          <ion-card class="tag-image" mode="ios" (click)="goPage(tag)">
            <img src="{{tag.image}}" alt="" />
          </ion-card>
          <h2>{{tag.title}}</h2>
        </ion-slide>
      </ion-slides>
slideOptions = {
    loop: false,
    initialSlide: 0,
    slidesPerView: 1,
    centeredSlides: false,
    spaceBetween: 10
  };

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/Users/kalicki/.nvm/versions/node/v10.15.3/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.2.0
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.3.8
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.5.0

Capacitor:

   capacitor (Capacitor CLI) : 1.0.0-beta.19
   @capacitor/core           : 1.0.0-beta.19

System:

   NodeJS : v10.15.3 (/Users/kalicki/.nvm/versions/node/v10.15.3/bin/node)
   npm    : 6.4.1
   OS     : macOS Mojave

@ionitron-bot ionitron-bot bot added the triage label Apr 6, 2019

@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Apr 8, 2019

Hi there,

Thanks for the issue. I am unable to reproduce the issue you are reporting. Can you clarify the steps you are taking to reproduce this issue?

Thanks!

@ionitron-bot ionitron-bot bot removed the triage label Apr 8, 2019

@kalicki

This comment has been minimized.

Copy link
Author

commented Apr 8, 2019

Hi,

We have a slideshow (slide) with cards. So when the person gives a swipe to the right or left and hold on (in the swipe) and give a touch that error is shown.
I think in the video you can see the problem well and the interaction of swipe with click.

@ionitron-bot ionitron-bot bot added triage and removed needs: reply labels Apr 8, 2019

@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Apr 9, 2019

Hi there,

Are you able to reproduce this on a clean starter application? Given the code you provided, I am unable to reproduce the issue you are experiencing.

@ionitron-bot ionitron-bot bot removed the triage label Apr 9, 2019

@kalicki

This comment has been minimized.

Copy link
Author

commented Apr 9, 2019

Check this repo with starter app: https://github.com/kalicki/ionic-slide-report

I too create video with this "blank/start" repo:
Video 1: https://streamable.com/q4vcc
Video 2: https://streamable.com/r2rza

@ionitron-bot ionitron-bot bot added triage and removed needs: reply labels Apr 9, 2019

@kalicki

This comment has been minimized.

Copy link
Author

commented Apr 9, 2019

In this other video has another problem, two clicks with two fingers.

https://streamable.com/1pje4

@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Apr 9, 2019

Hi there,

Thanks for the follow up. You need to wrap the content in your ion-slide component in <div class="swiper-zoom-container"></div> since your swiper instance has zooming enabled. From what it looks like, I think having the two fingers on the screen at the same time is trying to trigger something with zooming, but that zoom container div isn't present and an error is being thrown as a result.

I am going to close this as it is not a bug, but I will make sure the ion-slides docs are updated to make note of this. (see comment below)

Thanks for using Ionic!

@liamdebeasi liamdebeasi closed this Apr 9, 2019

@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Apr 9, 2019

Actually, changed my mind. I think it's easy enough for ion-slide to include the wrapper, so I'll update the slides component to do that.

In the meantime, the code I posted previously will work!

liamdebeasi added a commit that referenced this issue Apr 16, 2019

@ionitron-bot

This comment has been minimized.

Copy link

commented May 9, 2019

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators May 9, 2019

Kiku-git added a commit to Kiku-git/ionic that referenced this issue May 16, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.