bug: ion-refresher appears and gets stuck when scrolling downwards

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior:

When scrolling downwards ( by swiping upwards), the refresher appears on the top of the screen and gets stuck and is not spinning (shown in the screenshot). Refreshing normally by swiping downwards is working. Also refreshing normally makes the stuck refresher icon disappear.

Expected behavior:

The refresher icon should not appear when swiping upwards.

Steps to reproduce:

The ion-refresher element is the first element of the ion-content element and is followed by the list items

Related code:

<ion-content id="list-view-container">
        <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
            <ion-refresher-content></ion-refresher-content>
        </ion-refresher>
		<ng-container #instrumentscontainer></ng-container>
        <app-empty [dataCount]="dataCount"></app-empty>
</ion-content>

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.14.0 (/usr/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.6.5
   @angular-devkit/build-angular : 0.1102.10
   @angular-devkit/schematics    : 11.2.10
   @angular/cli                  : 11.2.10
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.7
   @capacitor/core : 2.4.7

Utility:

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

System:

   NodeJS : v14.16.1 (/usr/bin/node)
   npm    : 7.11.1
   OS     : Linux 4.19

[StavM]

@liamdebeasi

We are facing this issue as well.

This issue was introduced since version 5.6.1 and we suspect it’s caused by the change done in this line of code

From what we’ve seen since version 5.6.1 the framework immediately applies this.state = RefresherState.Pulling; in its gesture’s onStart callback, without checking the DIRECTION of the gesture (I believe you’re checking event.velocityY value to determine that) and other conditions I guess, as it was done prior to the change (in the onMove callback).

As seen here, there is no check done to validate the Y direction of the mouse/finger ‘pull’ (gesture). and it just triggers immediately. causing the class .refresher-pulling to be applied to the <ion-refresher> element.

This in turn, will cause the child element div.refresher-pulling element to gain display: flex instead of display: none and make it visible.

The reason you’re not seeing it immediately (and probably why you couldn’t reproduce) is because the header by default, has a higher z-index value than the <ion-refresher> element’s so it’s covering it. if you increase the z-index value of the refresher, you’ll see it immediately

The author of this issue, stated they’re using padding which can explain why they’re seeing it immediately. there is no header to hide it.

Again, this only happens since version 5.6.1 and its probably due to a missing if statement.

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/23283, and a fix will be available in an upcoming release of Ionic Framework.