bug: Android - Performance issue after scrolling

Bug Report

Capacitor Version

Latest Dependencies:

  @capacitor/cli: 2.4.6
  @capacitor/core: 2.4.6
  @capacitor/android: 2.4.6
  @capacitor/electron: 2.4.6
  @capacitor/ios: 2.4.6

Installed Dependencies:

  @capacitor/ios not installed
  @capacitor/cli 2.4.6
  @capacitor/android 2.4.6
  @capacitor/core 2.4.6
  @capacitor/electron not installed

[success] Android looking great!

Platform(s)

Android

Framework(s)

Angular, Ionic

Current Behavior

When you open the app in Android and don’t scroll, you can open a page and return back with fluid transitions. When you just scroll around a bit and open the page again und go back, the transition isn’t as fluid as in the beginning.

Expected Behavior

Always fluid navigation transitions.

Code Reproduction

Starter project with two demo pages. The home page contains some sliders and another test page has just red background to better demonstrate the issue. https://github.com/AE1NS/android-performance-issue

Other Technical Details

npm --version output: 6.14.8 node --version output: v13.8.0

Tested on: Samsung Galaxy S7 edge

Additional Context

In a more complex application we have significant performance issues with Android as also described here: https://github.com/ionic-team/capacitor/discussions/3899

Visual example

You will see it more clear on a real device, as in the low frames gif below.

Without scrolling	After scrolling
Example project
Productive project

[mitschmidt]

My team and I were having the same issues with performance on Android, while iOS was really smooth even on older devices.

We figured this was due to resources (i.e. number of DOM nodes) in combination with animations, my colleague @derbenoo found an elegant solution for our App. We plan to share our insights on our blog in the future, would that be interesting for anybody?

[AE1NS]

I just used the LiveReload feature to run the app with reference to my machine. Inside the chrome browser (most recent stable), I also opened the application.

Inside the browser the app is running flawless without any problems, but inside the webview I get always huge frame drops on my Galaxy S20 (and also on a Galaxy S7 edge). (Btw: I also used the Angular dev tools profiler, and we dont have any change detection issues.). I especially see the frame drops while the ionic page animations.

When I run the app on a Pixel 4 or a 3 year old Motorola, the app is running fine. This seems to be a problem with Samsung devices. The S20 uses the same webview implementation (I see this inside the dev options in the settings) as the chrome browser. Its the latest version. Android System WebView 94.0.4606.61

Update: I installed the Android System WebView Beta and I have the same problems in 94.0.4638.16. Then I uninstalled the Android System WebView from the play store. Now with 83.0.4103.106 its running flawless …