bug: refresher not visible when content has fullscreen attribute

[biesbjerg]

Bug Report

Ionic version:

[x] 4.x

Current behavior:
ion-refresher is not visible when content has fullscreen attribute.

Expected behavior:
ion-refresher should be visible when dragging content down, even if content has a fullscreen attribute.

Steps to reproduce:

<ion-content fullscreen>
	<ion-refresher>
		<ion-refresher-content></ion-refresher-content>
	</ion-refresher>
	<ion-list>
		<ion-item>
			<ion-label>Pokémon Yellow</ion-label>
		</ion-item>
		<ion-item>
			<ion-label>Mega Man X</ion-label>
		</ion-item>
		<ion-item>
			<ion-label>The Legend of Zelda</ion-label>
		</ion-item>
		<ion-item>
			<ion-label>Pac-Man</ion-label>
		</ion-item>
		<ion-item>
			<ion-label>Super Mario World</ion-label>
		</ion-item>
	</ion-list>
</ion-content>

Related code:
It seems to be some kind of z-index issue, since adding a higher value shows the refresher:

<ion-content fullscreen>
	<ion-refresher style="z-index: 999">
		<ion-refresher-content></ion-refresher-content>
	</ion-refresher>
	<ion-list>
		<ion-item>
			<ion-label>Pokémon Yellow</ion-label>
		</ion-item>
		<ion-item>
			<ion-label>Mega Man X</ion-label>
		</ion-item>
		<ion-item>
			<ion-label>The Legend of Zelda</ion-label>
		</ion-item>
		<ion-item>
			<ion-label>Pac-Man</ion-label>
		</ion-item>
		<ion-item>
			<ion-label>Super Mario World</ion-label>
		</ion-item>
	</ion-list>
</ion-content>

Other information:

Related issues:
#10490
ionic-team/ionic-v3#256

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.1 (/Users/kim/.npm-global/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.1-dev.201907031812.d71c1cd
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 9.0.0
   Cordova Platforms : android 8.0.0, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 8 other plugins)

Utility:

   cordova-res : 0.5.2
   native-run  : 0.2.7

System:

   Android SDK Tools : 26.1.1 (/Users/kim/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.1
   NodeJS            : v10.15.0 (/usr/local/bin/node)
   npm               : 6.10.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.2.1 Build version 10E1001

[liamdebeasi]

Thanks! I created a CodePen of the bug here: https://codepen.io/liamdebeasi/pen/ewMdLg

[narhc8]

@liamdebeasi Has this been fixed? I still experience this issue with Ionic 5.0.5 when ion-content is set to fullscreen with the ion-refresher within that.

[ghenry22]

@liamdebeasi any chance of a fix for the refresher? I have the latest release of ionic v5 and still just see a blank space when pulling to refresh if ion-content has fullscreen="true". Makes for a terrible user experience as the user has no idea what they have done or what is happening.

[stephenglass]

Can confirm ion-refresher does not work with fullscreen on iOS using latest version of Ionic React

[o-dlr-o]

Hello, maybe you can try to increase pullMin value.

[fr3fou]

Will this be fixed in Ionic 6?

[impzero]

I hope we see a fix for this in Ionic 6 ...

[mxmlc]

Well, I just came across the issue by chance. I know that's not an elegant solution as custom ones will show over the content of the page but, while we wait for a definitive solution, overriding the following style in my global.scss and changing its default z-index from -1 to 1 (or greater) works for me:
ion-refresher.refresher-active { z-index: 1; }

[GuidoGagliardini]

Hello, I have a similar error.
On the web the spinner show when I am testing the app, but when I compile for IOS in the application the spinner not show.

Ionic:

   Ionic CLI                     : 6.19.1 (/usr/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.4.4
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Cordova:

   Cordova CLI       : 11.0.0
   Cordova Platforms : browser 6.0.0, ios 6.2.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 11 other plugins)

Utility:

   cordova-res                          : 0.15.4
   native-run (update available: 1.7.1) : 1.4.1

System:

   Android SDK Tools : 26.1.1 (/home/guidogagliardini/NuevosDocs/Android/Sdk)
   NodeJS            : v14.19.1 (/home/guidogagliardini/.nvm/versions/node/v14.19.1/bin/node)
   npm               : 6.14.16
   OS                : Linux 5.15

  <ion-refresher  slot="fixed"
    (ionRefresh)="doRefresh($event)"
    pull-factor="1.2"
    pull-min="60"
    pull-max="40"
    snapback-duration="200ms">
    <ion-refresher-content
    pullingIcon="lines"
    refreshingSpinner="bubbles"
    ></ion-refresher-content>
  </ion-refresher>