bug: Ion-Slider Issue with Modal with Image

[EyadIT94]

Bug Report

Ionic version: [x] 5.2.0

Current behavior: When I open a model that had a photo inside a Swiper, I cannot zoom in and zoom out and it looks like the swiper in free mode, even when I press the buttons of zoom in and out and same.

Expected behavior: It should be zooming in and out without any issues

Steps to reproduce: Press into a photo, It will opens a modal, then try to zoom in/zoom out.

Related code:

You can see this the example application I upload it in my GitHub

https://github.com/EyadIT94/GalleryExampleAppIonic

modalimage.html

<ion-content fullscreen>

  <ion-item class="close-fake ion-text-center" lines="none">

    <ion-button (click)="close()" fill="clear">
      <ion-icon slot="start" name="close"></ion-icon>
      Back
    </ion-button>

    <ion-button (click)="zoom(true)" fill="clear">
      <ion-icon slot="start" name="add"></ion-icon>
      in
    </ion-button>

    <ion-button (click)="zoom(false)" fill="clear">
      <ion-icon slot="start" name="remove"></ion-icon>
      out
    </ion-button>

  </ion-item>

  <ion-slides class="slides" [options]="sliderOpts" #slider>
    <ion-slide>
      <div class="swiper-zoom-container">
        <img [src]="img">
      </div>
    </ion-slide>
  </ion-slides>

</ion-content>

modalimage.page.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { NavParams, ModalController } from '@ionic/angular';

@Component({
  selector: 'app-modalimage',
  templateUrl: './modalimage.page.html',
  styleUrls: ['./modalimage.page.scss'],
})
export class ModalimagePage implements OnInit {

  img:any;

  @ViewChild('slider', {read: ElementRef}) slider: ElementRef;

  sliderOpts ={
    zoom: {
      maxRatio: 3
    }
  }

  constructor(private navParams: NavParams, private modalController: ModalController) { }

  ngOnInit() {
    this.img = this.navParams.get('img');
  }

  zoom(zoomIn: boolean){
    let zoom = this.slider.nativeElement.swiper.zoom;
    if(zoomIn){
      zoom.in();
      console.log("zoomin");

    }
    else{
      zoom.out();
      console.log("zoomout");
    }
  }

  close(){
    this.modalController.dismiss();
  }

}

Ionic info:

Ionic:

   Ionic CLI                     : 6.9.2 (C:\Users\OJP1\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.2.0
   @angular-devkit/build-angular : 0.901.8
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 9.1.8
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.2.0
   @capacitor/core : 2.2.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.16.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.5
   OS     : Windows 10

[liamdebeasi]

Thanks for the issue. I am unable to reproduce the issue you are describing. Pressing the zoom in/out buttons is working for me in the example app you provided. Can you please clarify your steps to reproduce the issue?

[EyadIT94]

Thanks for the issue. I am unable to reproduce the issue you are describing. Pressing the zoom in/out buttons is working for me in the example app you provided. Can you please clarify your steps to reproduce the issue?

Hi, I have been attached this demonstration photo below, you can see it please.

Noted this in Chrome browser, and I tested it in the android emulator and it's the same.

[liamdebeasi]

Thanks for the follow up. I am still unable to reproduce the behavior in the gif. What version of Chrome are you testing this in?

[EyadIT94]

My chrome version is: Version 83.0.4103.97 (Official Build) (64-bit)

Is there any solution of this issue? it is related to SwiperJS?

Thanks

[liamdebeasi]

It may be an issue with Swiper, but I cannot say for certain since I am unable to reproduce the issue. Can you please provide some steps to reproduce?

[EyadIT94]

If you make ionic serve then the page is open, for example you make it as iPhone X, refresh the browser and try to make the steps that is shown in the GIF that I upload it

[liamdebeasi]

Can you please list out the steps you are doing in the GIF?

[EyadIT94]

Okay, Just a min

[EyadIT94]

You can see this GIF I have been uploaded below.

[liamdebeasi]

Thanks for the issue. I am still unable to reproduce the issue you are describing. For me, the slide bounces back whenever I drag and let go of it. In the GIF, it looks like it is staying put. How do I get the behavior that is in your GIF?

[EyadIT94]

Did you refresh the google chrome after you changes the layout to iPhone X for example? Because if I didn't refresh the issue will not occurs, also when I test it in the Android Emulator it's the same problem I got it in my side :(

[liamdebeasi]

Thanks for the follow up. This appears to be a duplicate of https://github.com/ionic-team/ionic/issues/19638. Please see that thread for a temporary workaround.

[ionitron-bot[bot]]

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.