Ionic-framework: bug: When page scroll content isn't longer than screen on Android, ion-refresher is laggy as hell

[daveshirman]

Bug Report

Ionic version:
[x] 5.x

Current behavior:
If your page is shorter than the height of the screen on Android, resulting in no scrollbar needed, the ion-refresher animation laggy as hell.

This is not an issue in the browser or iOS.

Expected behavior:
Smooth pull to refresh regardless of page scroll content on Android.

Steps to reproduce:
Make a blank page (or just a navbar) with an ion-refresher, run on android device.

Related code:

e.g:

<ion-header>
  <ion-toolbar>
    <ion-title>
      My app
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

    <ion-card class="welcome-card">
      <ion-card-header>
        <ion-card-title>Welcome to Ionic</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p>Whatever</p>
      </ion-card-content>
    </ion-card>

</ion-content>

Download the zip here: https://github.com/daveshirman/IonicRefresherBug
This does not happen on desktop. Just Android

Other information:
Testing on Android 7+

Ionic info:

Ionic:

   Ionic CLI                     : 6.11.7 (/Users/daveshirman/.nvm/versions/node/v13.12.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.1.1
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : android 9.0.0, ios 6.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 16 other plugins)

Utility:

   cordova-res (update available: 0.15.1) : 0.11.0
   native-run (update available: 1.0.0)   : 0.2.8

System:

   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v13.12.0 (/Users/daveshirman/.nvm/versions/node/v13.12.0/bin/node)
   npm        : 6.14.8
   OS         : macOS Mojave
   Xcode      : Xcode 11.3.1 Build version 11C504

[liamdebeasi]

Thanks for the issue. What device are you testing this on? I am testing this on a Samsung Galaxy S6 running Android 7 and I am unable to reproduce this issue.

[daveshirman]

@liamdebeasi Sony Xperia Z5Compact - Android 7.1.1.

[liamdebeasi]

Thanks. If you inspect the application using Chrome Dev Tools, what is the output of running window.navigator.userAgent in the console?

[daveshirman]

Thanks. If you inspect the application using Chrome Dev Tools, what is the output of running window.navigator.userAgent in the console?

Mozialla/5.0 (Linux Android 7.1.1...
AppleWebKit/537.36 (KHTML, like Gecko)
Version/4.0 Chrome/85.0.4183.81
Mobile Safari/537.36

Looks like from the thumbs up that others have this issue too btw.

[liamdebeasi]

Thanks, the user agent string looks fine. I was concerned the version of Chrome was outdated, but it looks pretty up to date.

For those that are running into this issue, are there other ways I can reproduce this issue? Unfortunately, I cannot fix the issue if I cannot reproduce it.

[daveshirman]

Few questions that might help narrow this down @liamdebeasi:

1. How does the refresher actually 'work' when the content length is shorter than the screen - Could this be related to the actual screen dimensions - as the Z5c is the smallest android available now at 4.6 inch?

2. Do you have any devices on 7.1.1 you can test?

3. Did you try the zip I uploaded, so there's nothing else interfering with the test?

[liamdebeasi]

Can you clarify what you mean by the "content length is shorter than the screen"? Do you mean that there is no scrollbar?

I am testing on a device running Android 7.0, but there shouldn't be any differences between that and 7.1.1 since any changes are tied to the WebView version.

[daveshirman]

Exactly that - same as I said in the title. As soon as the content is long enough that there is scrolling, bug is gone. This is reproducible with the test project I linked if you just add some more cards.

[daveshirman]

So if it's just the webview, then there's something wrong with the way it works depending on the screen height I think, hence why I asked 'HOW' it works...

[liamdebeasi]

Can you please provide a video of what you are experiencing? I am still unable to reproduce the issue.

Pull to Refresh on Android works via a custom gesture that translates the refresher down the screen: https://github.com/ionic-team/ionic-framework/blob/master/core/src/components/refresher/refresher.tsx#L274

[daveshirman]

https://www.dropbox.com/s/ms1bcs4chqv7yyg/ScreenRecord_2020-08-31-10-48-07.mp4?dl=0

Screen recording in my DropBox link

[liamdebeasi]

Thanks - during the first 5-6 seconds of the video where it appears frozen, are you pulling down on the screen?

Also, can you reproduce this on any other devices?

[daveshirman]

Nope - just pulling down slowly as to illustrate the issue - ignore the first few seconds.
I have not tried another device yet.

[liamdebeasi]

Ok thanks. This may just be a matter of device performance. I will give this a try on one of my lower end Android devices.

[daveshirman]

This is not a matter of device performance though - as I said - when the content is long enough for a scroll to be enabled, this issue completely disappears and it's smooth.

So it cannot be anything to do with performance. This phone is fast enough.

[liamdebeasi]

Thanks for the follow up. I tried testing your application on my Samsung Galaxy S3 running Android 4.4 (in Chrome 81), and I was still unable to reproduce the issue. The pull to refresh effect was smooth and did not jump around at all.

Are you able to reproduce this on any other devices? Otherwise, I will have to close this issue since I cannot reproduce the behavior you are describing.

edit: I know this sounds silly, but can you also try rebooting your phone to see if it fixes the issue?

[daveshirman]

Rebooted phone - same result.

Also just reproduced same problem on Samsung A5 2017, Android 8.0.0

Is there a discrepancy between your package.json and the one in the zip?

There has to be something else different if you're not seeing the same result as I have verified this is problem on 2 completely different handsets and Android versions.

Do not just close this bug.

Any update please?

[liamdebeasi]

Is there anything else you can tell me about how you reproduce the issue? I have tested on several Android devices (both high end and low end devices) and cannot reproduce the behavior listed in the original post.

[indraraj26]

Working fine for me, Tested on android 7.1.2, Model Redmi 4A

"Mozilla/5.0 (Linux; Android 7.1.2; Redmi 4A Build/N2G47H; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/83.0.4103.106 Mobile Safari/537.36"

[daveshirman]

Working fine for me, Tested on android 7.1.2, Model Redmi 4A

"Mozilla/5.0 (Linux; Android 7.1.2; Redmi 4A Build/N2G47H; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/83.0.4103.106 Mobile Safari/537.36"

Did you use the test project I supplied?

@liamdebeasi please see my last comment. There's something up here.

[indraraj26]

Did you use the test project I supplied?

Yes i am using your zip project to test, its working fine

[daveshirman]

Did you use the test project I supplied?

Yes i am using your zip project to test, its working fine

Ok - please can I see your ionic info output?
There is definitely a bug and it could be related to all sorts of dependencies.

Thanks

[indraraj26]

I just clone your repo then hit the npm i && ionic cordova platform add android@latest && ionic cordova build android

D:\ionic\IonicRefresherBug\Refresher-proj>ionic info

Ionic:

   Ionic CLI                     : 6.11.0 (C:\Users\indra26\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.3.2
   @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       : 10.0.0
   Cordova Platforms : android 9.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 4 other plugins)

Utility:

   cordova-res : 0.15.1
   native-run  : 1.0.0

System:

   Android SDK Tools : 26.1.1 (C:\Users\indra26\AppData\Local\Android\Sdk)
   NodeJS            : v10.16.3 (C:\Program Files\nodejs\node.exe)
   npm               : 6.9.0
   OS                : Windows 10


D:\ionic\IonicRefresherBug\Refresher-proj>

[daveshirman]

I just clone your repo then hit the npm i && ionic cordova platform add android@latest && ionic cordova build android

D:\ionic\IonicRefresherBug\Refresher-proj>ionic info

Ionic:

   Ionic CLI                     : 6.11.0 (C:\Users\indra26\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.3.2
   @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       : 10.0.0
   Cordova Platforms : android 9.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 4 other plugins)

Utility:

   cordova-res : 0.15.1
   native-run  : 1.0.0

System:

   Android SDK Tools : 26.1.1 (C:\Users\indra26\AppData\Local\Android\Sdk)
   NodeJS            : v10.16.3 (C:\Program Files\nodejs\node.exe)
   npm               : 6.9.0
   OS                : Windows 10


D:\ionic\IonicRefresherBug\Refresher-proj>

Right - so your @ionic/angular is different - 5.3.2 vs my 5.1.1

I've updated my project to the latest version of ionic angular and this is still happening on my end.

[liamdebeasi]

I am currently testing this on another Android device and will let you know if I am successful in reproducing this issue. One more question for you: Can you reproduce the issue in Chrome for Android, or does it only reproduce when deploying via Capacitor/Cordova?

[daveshirman]

I can reproduce it in Chrome on Android at my test URL, iOS is fine in
safari:

https://add.video/refreshertest

So that's without Cordova.

On Wed, 2 Sep 2020, 16:29 Liam DeBeasi, [e-mail] wrote:

I am currently testing this on another Android device and will let you
know if I am successful in reproducing this issue. One more question for
you: Can you reproduce the issue in Chrome for Android, or does it only
reproduce when deploying via Capacitor/Cordova?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic-framework/issues/22008#issuecomment-685979204,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ADM6KXRN5FZNVIXDY2HLUPTSD2TLDANCNFSM4QPWXO7Q
.

[liamdebeasi]

I was finally able to reproduce the issue. The missing factor was I was using an older version of Chrome. This does not appear to be a bug in Ionic Framework, but rather, a bug in Chromium. I will see if I can isolate the issue and report this to the Chromium team.

[liamdebeasi]

It looks like this is a regression in Chrome 84/85. Other users have already filed an issue, so hopefully it will be resolved soon. Passive touch events appear to be heavily throttled in the latest release; however, it does not appear to happen when developer tools are open.

I have followed up on the thread to provide any additional assistance I can: https://bugs.chromium.org/p/chromium/issues/detail?id=1123304.

I am going to close this issue as this is not a bug in Ionic Framework, but I will follow up here when this issue has been resolved on the Chromium end. Thanks for all the help debugging this!

[daveshirman]

Good detective work Liam.

I have to ask though, since this directly affects the working of the ionic
refresher component on Android, shouldn't there be some sort of bug open
for it? I mean I technically understand what you're saying (and I read the
Google bug thread thanks), but it doesn't change the fact that the control
operates unexpectedly in different circumstances and therefore is not
currently fully fit for use.

On Wed, 2 Sep 2020, 20:11 Liam DeBeasi, [e-mail] wrote:

It looks like this is a regression in Chrome 84/85. Other users have
already filed an issue, so hopefully it will be resolved soon. Passive
touch events appear to be heavily throttled in the latest release; however,
it does not appear to happen when developer tools are open.

I have followed up on the thread to provide any additional assistance I
can: https://bugs.chromium.org/p/chromium/issues/detail?id=1123304.

I am going to close this issue as this is not a bug in Ionic Framework,
but I will follow up here when this issue has been resolved on the Chromium
end. Thanks for all the help debugging this!

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic-framework/issues/22008#issuecomment-686152162,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ADM6KXRPMLBWPJF6RGFKISTSD3NJXANCNFSM4QPWXO7Q
.

[liamdebeasi]

I get what you are saying regarding how the refresher component is not functioning as expected, but we typically only keep issues open if the source of the issue is in Ionic Framework's code. In the event other people run into this issue, I will direct them to the Chromium thread so they can get caught up on the status of the issue.

[liamdebeasi]

Hey there,

I wanted to provide an update. The Chromium team has prepared a fix for this (https://bugs.chromium.org/p/chromium/issues/detail?id=1123304), and the fix has landed in Chrome Canary. I have tested and verified that this change does indeed fix the issue reported here.

Assuming others on the thread do not find any major issues, this fix will ship in an upcoming version of Chrome (I am guessing v86 or v87).

[liamdebeasi]

Hey there,

The Chromium fix has shipped as part of Chrome v86. If your device has not already done so, I recommend updating Chrome for Android to this version. Thanks!

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