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

[telpat0298]

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

[liamdebeasi]

Thanks for the issue. Can you reproduce this in an Ionic starter app and provide a link to the repo? I am unable to reproduce the issue using the code provided.

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[telpat0298]

Thank you for your answer.

I could not reproduce this issue on stackblitz but i was able to reproduce it locally on my machine. This github repo contains a minimal reproduction of this issue.
Culprit of this issue seems to be the combination of

• two nested ion-content components containing the refresher component
• padding on the first, outer ion-content component.

In this configuration, the refresher component is getting stuck when scrolling downwards(by swiping upwards).

[liamdebeasi]

Thanks for the follow up. There should only be one ion-content per view (see: https://ionicframework.com/docs/api/content). Does the issue happen without the second nested ion-content?

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

[avidan-chen]

@liamdebeasi we are due for a release next week and this is a blocker for us, would it possible for you to release a quick fix (even as a "dev" version, not necessarily a stable version) before the end of next week? As @StavM mentioned, it seems all that's missing is the "if" statement in on the onStart() handler (for MD only), to verify the direction is indeed pulling up and not down. It's very noticeable in our app (since we also use padding top for the entire page due to various UX considerations) - when the user starts scrolling down, the refresher appears immediately and is stuck on the page.

[liamdebeasi]

Can you provide a reproduction of the issue with steps to reproduce? I was only able to reproduce it using the example in #23245 (comment) because there were two ion-content components. When using one ion-content I cannot reproduce the issue.

[StavM]

@liamdebeasi

Version 5.6.6 - Issue
https://stackblitz.com/edit/ionic-5-angular-10-start-template-ay8frp?file=src/app/tab1/tab1.page.html

Version 5.6.0 - No Issue
https://stackblitz.com/edit/ionic-5-angular-10-start-template-hm6rrb?file=package.json

[liamdebeasi]

Thanks! Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/angular@5.7.0-dev.202105071428.1e5eabe