Ionic 4 Chrome Browser Native Pull To Refresh Not working

Ionic Framework
1

Problem
When running Ionic 4 via a mobile web browser on Android using Chrome, the native’s “pull to refresh” does not work.

History / Summary
I’ve spent the last 4 hours searching online for a solution. Everything seems to come back to the Ion-Refresher component, but that’s not what this is about and not the best solution.

I found 1 post reported as an issue in a Github repo that was nearly identical, however the issue was closed without a resolution because of inactivity :slight_smile: Of course I can not find it anymore either.

I understand, this should be disabled for native apps, however using a web app via the web browser it should work. This takes away from what users are familiar with and requires the developer to use the ion-refresh.

Tried the following:

  • overscroll-behavior: auto !important via CSS on the body element. I’ve read this can disable the native pull to refresh.

I’m starting to lose my mind on this. Anyone out know how to solve this problem?

2 Likes
2

Any updates on this? need to somehow allow user to refresh app with chrome native experience.

3

Hello, I just noticed you asked for an update on this. Sorry for the long delay :slight_smile: I did not figure it out. I just used the Ion-Refresher which was not ideal…

4

Any updates on this?

5

Any updates on this? Ionic 5 also has the same issue.

6

Hi there,

overscroll-behavior is set on the inner scroll element inside of ion-content. While we do not recommend altering this as it can interfere with gestures inside of your application, you can use the following CSS to change it:

ion-content::part(scroll) {
  overscroll-behavior: auto;
}

I recommend using ion-refresher instead of doing this. With Ionic Framework v5, the default ion-refresher style on Android now matches the “native” refresher that is built into the Chrome browser, providing the same experience.