Scrolls backgroud page

[mubasshir]

It works just the desired way but only major issue is, when zoomed & scrolled, it also scrolls page which opened it.

I have chat screen where all messages as listed in ion-list/ion-item. One of ion-item could be an image which on clicked, opens the image in your module. But on zoomed & scroll, its scrolls content of chat page in vertical direction in BACKGROUND. Now, when user closes module, page is already scrolled which gives back impression.

Kindly suggest a way out. Thanks for the amazing module.

[Riron]

Which version are you using ? There is an issue template that asks you for this kind of infos, please fill it.

[mubasshir]

Ionic Info: cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.15.2
ionic (Ionic CLI) : 3.15.2

global packages:

cordova (Cordova CLI) : 7.1.0 

local packages:

@ionic/app-scripts : 3.0.1
Cordova Platforms  : android 6.3.0 ios 4.5.2
Ionic Framework    : ionic-angular 3.8.0

System:

Android SDK Tools : 25.2.3
ios-deploy        : 1.9.2 
Node              : v8.9.0
npm               : 5.5.1 
OS                : macOS Sierra
Xcode             : Xcode 9.1 Build version 9B55

Package: "ionic-img-viewer": "^2.8.0"

[mubasshir]

hey, any resolution for this?

[Riron]

I tried to reproduce the issue but couldn't. Does it happens on desktop ? iphone ? Android ? Only when zoomed in ? Do you have custom styles applied to the image viewer ? And an exemple of your html would be helpfull.

[selected-pixel-jameson]

This happens on iOS 11. It doesn't appear to happen on Android.

• Create a list of Ionic Cards with background images
• Click on the first image to go full screen
• Pinch to Zoom in on the image
• Drag around the image when zoomed in
• Click back and the list will now be at the bottom or much farther down.

[Riron]

Thanks a lot for the details. Unfortunately I don't have an iPhone available. PRs are welcome... It's probably a CSS related problem.

[c00]

This might very well be this bug: https://github.com/ionic-team/ionic/issues/6980

User longzheng in that thread has a reasonable workaround.

[kevingrabher]

I've created a workaround to prevent scrolling and swiping back behind the imageViewer.

Opening the image-viewer

const viewer = this.imageViewerCtrl.create(imageToView, {fullResImage: fullSizePicture});
viewer.onDidDismiss(() => this.enableBackNav());
viewer.present();

The functions to block and reenable navigation This disables swipeBack (to prevent navigating back accidentally while the viewer is open) and sets a variable that is used for a class (noScrollClass)

preventBackNav(){
    this.zone.run(() => {
        this.noScrollClass = 'noScroll';
        this.navCtrl.swipeBackEnabled = false;
    });
}

enableBackNav(){
    this.zone.run(() => {
     this.noScrollClass = 'yesScroll';
     this.navCtrl.swipeBackEnabled = true;
    });
}

The class in css:

.noScroll {
     overflow: hidden !important;
}

You'll need to set that class to whichever element has overflow: scroll in your app. <div [ngClass]="noScrollClass">content that usually scrolls</div>