Refresher component low frame rate

I using Ionics refresher component inside a ion-content component. I haven’t tested it on iOS yet, but on android (physical device) when pulling down the refresher, the frame rate of the refresher animation drops and the animation gets laggy. When letting it go in order to trigger the refresh, the animation runs smoothly as expected. Also in the browser the whole animation (pulldown and refresh) runs flawlessly.

Has anyone else observed this behavior?

Cap Doctor

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 2.4.2

  @capacitor/core: 2.4.2

  @capacitor/android: 2.4.2

  @capacitor/electron: 2.4.2

  @capacitor/ios: 2.4.2

Installed Dependencies:

  @capacitor/ios not installed

  @capacitor/electron not installed


  @capacitor/cli 2.0.1

  @capacitor/core 2.4.2

  @capacitor/android 2.4.2

[success] Android looking great! 👌

Angular version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.1.3
Node: 13.14.0
OS: linux x64

Angular: 10.1.3
... cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1000.8
@angular-devkit/build-angular   0.1000.8
@angular-devkit/core            10.0.8
@angular-devkit/schematics      10.0.8
@schematics/angular             10.0.8
@schematics/update              0.1001.3
rxjs                            6.5.5
typescript                      3.9.7

Ionic Version

6.11.9
1 Like

Experiencing the same issue.

i have the same issue,

i found that it only appears when ion-content is not scrollable. when i have a div inside set to 110% height, the animation is smooth.

Good to know that there is someone else experiencing the same issue. I’ve submitted a bug report on github today.
#3654

As liamdebeasi stated in #22008 this issue get’s fixed in v86 of google chrome.

As workaround for those who haven’t updated yet: Setting the attribute forceOverscroll in the ion-content to true, fixes the problem. Note that the list will scroll a little bit, even if there is no overflow.