Ionic-framework: [4.0.0-rc.0] iOS: ion-refresher not working after page change

[soumyanildas]

Bug Report

Ionic version:
[x] 4.x

Current behavior:
ion-refresher works for the first time visiting the page. Once we go to some other pages and come back, the ion-refresher doesn't work anymore on iOS. Works as intended on Android.

Expected behavior:
ion-refresher should work after page changes

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.2.1
   Ionic Framework               : @ionic/angular 4.0.0-rc.0
   @angular-devkit/build-angular : 0.7.0-rc.3
   @angular-devkit/schematics    : 0.7.0-rc.3
   @angular/cli                  : 6.2.3
   @ionic/angular-toolkit        : not installed

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 16 other plugins)

System:

   ios-deploy : 1.9.4
   NodeJS     : v10.10.0 (/usr/local/Cellar/node/10.10.0/bin/node)
   npm        : 6.4.1
   OS         : macOS High Sierra
   Xcode      : Xcode 9.2 Build version 9C40b

[yang22zhang]

I also have this problem. Have you solved it?

[soumyanildas]

I also have this problem. Have you solved it?

No, I haven't been able to solve it yet.

[cluigDE]

I experience a similar issue on both Android an IOS with the Taps.
1-2 Pages remain the ion-refresher function. The others loose it after the revisit.

[kinggolf]

With 4.0.0-rc.2 I am not seeing the refresh icons on either iOS or Safari, but it's OK on Android and Chrome. The issue seems to be related to z-index value in ion-refresh in ionic-globals.scss. This was changed from 0 to -1 in this change. In Safari I set this back to 0 in dev tools and refresh icon appears.

My ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.8.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.2
   @angular-devkit/build-angular : 0.12.2
   @angular-devkit/schematics    : 7.2.2
   @angular/cli                  : 7.2.2
   @ionic/angular-toolkit        : 1.2.2

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 7.1.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 4 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/golftocs/Library/Android/sdk)
   ios-deploy        : 1.9.4
   NodeJS            : v10.12.0 (/usr/local/bin/node)
   npm               : 6.5.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

Hope this helps.

[kinggolf]

BTW - ionRefresh event emitter works, so the pull-to-refresh functionality is still present.

[kinggolf]

FYI - by adding style="z-index: 0;" to ion-content tag as below, ion-refresher works properly throughout my app for all platforms, iOS, Safari, Android, & Chrome with V4.0.0-rc.2.

    <ion-content class="icviewa" style="z-index: 0;">
      <ion-refresher (ionRefresh)="uLbds($event)">
        <ion-refresher-content></ion-refresher-content>
      </ion-refresher>

The ion-refresher works properly, per this issue, which triggered the ion-refresher css to change.

[AMRALAA10]

I'm not gonna say anything new here, @kinggolf fix worked for me just in case you are coping better to put this on your scss

ion-content {
    z-index: 0;
}

[maxtacco]

@AMRALAA10, z-index still doesn't work. I have an app that uses tabs and ion-refresher stops working after some navigation. Also, I have multiple ion-refreshers.

[neontuna]

Having the same issue - z-index fix didn't help. This seems more pronounced on tabbed pages.

[buuug7]

look this comment, I think it will solve your problem @neontuna @maxtacco

[JianhuisHuang]

Having the same issue - z-index fix didn't help. This seems more pronounced on tabbed pages.

My problem is the same as yours. Have you solved? @neontuna Thx.

[hardslk]

I have also same problem with tabs.