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?

[lyubchev]

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>

[grantur5707]

I have a problem with ion-refresher not displaying correctly inside ion-content, which has a fullscreen attribute too. I'm not the only one who has had this problem.

<ion-content class="ion-padding" fullscreen>
    <ion-refresher slot="fixed" [pullFactor]="0.5" [pullMin]="120" [pullMax]="200" (ionRefresh)="handleRefresh($event)">
        <ion-refresher-content
            pullingIcon="chevron-down"
            pullingText="Потяните для обновления"
            refreshingSpinner="circles"
            refreshingText="Обновление...">
        </ion-refresher-content>
    </ion-refresher>
    <ion-grid>
       ...
    </ion-grid>
</ion-content>

As a workaround, I had to reassign z-index to the ion-refresher class:

ion-refresher.refresher-active {
   z-index: 1;
}

Steps to Reproduce

1. Create in the template and add the fullscreen attribute:
2. Place inside and make sure the refresher is not displayed correctly

Ionic Info
$ ionic info
[ERROR] Error loading @ionic/angular package.json: Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './package' is not defined by "exports" in D:\AppWork\VmestePlus\node_modules@ionic\angular\package.json

Ionic:

Ionic CLI : 5.4.16
Ionic Framework : not installed
@angular-devkit/build-angular : 17.3.5
@angular-devkit/schematics : 17.3.5
@angular/cli : 17.3.5
@ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 5.7.3
@capacitor/core : 5.7.3

Cordova:

Cordova CLI : 12.0.0 ([email protected])
Cordova Platforms : not available
Cordova Plugins : not available

Utility:

cordova-res : not installed
native-run : 2.0.1

System:

NodeJS : v20.12.0 (C:\Program Files\nodejs\node.exe)
npm : 10.5.0
OS : Windows 10

[thetaPC]

Thanks for the issue! This has been resolved via PR #29608 and will be available in an upcoming release of Ionic.

[ionitron-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.