Ripple effect flickers multiple times on emulator/device

[kyleabens]

Bug Report

Ionic version:

[x] 4.0.2

Current behavior:

When tapping an ion-item that links to another route the built in ion-ripple-effect flickers twice or sometimes not at all and is not a complete smooth animation. It's hard to explain but as of right now I only experience this bug when running my app in an emulator or on my device. Browser works just fine.

Expected behavior:

Ripple effect fires once and completely without any flickering.

Steps to reproduce:

1. Create an ionic app,
2. Set the mode to 'md'
   IonicModule.forRoot({
   mode: 'md'
   })
3. Create an ion-list and a single ion-item that has a routerLink which routes to another page.
4. Run the app on a device or an emulator.
5. Click the ion-item

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.3 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.2
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.3.1
   @angular/cli                  : 7.3.1
   @ionic/angular-toolkit        : 1.3.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.5, (and 15 other plugins)

System:

   ios-deploy : 2.0.0
   NodeJS     : v10.15.0 (/usr/local/bin/node)
   npm        : 6.4.1
   OS         : macOS Mojave
   Xcode      : Xcode 10.1 Build version 10B61

[liamdebeasi]

Hi there,

Thanks for opening an issue with us! Would you be able to paste your user agent string when running on the device? You can find this by logging window.navigator.userAgent to the console.

Thanks!

[kyleabens]

@liamdebeasi

Mozilla/5.0 (iPhone; CPU iPhone OS 12_1_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/16D57/sgudiecvjgjyazudaenmlocjrrocohdf

Let me know if you need anything else.

Thanks!

[liamdebeasi]

Hi there,

Thanks for the follow up. I was unable to reproduce the issue you are describing. Can you provide a repository with the code required to reproduce this issue?

Thanks!

[kyleabens]

@liamdebeasi

Here ya go. https://github.com/kyleabens/ionic-ripple-flicker

Here's what you should see when you first run it in the iOS emulator and click 'CLICK ME! for the first time.

After the first initial click it appears to be okay but if you reload it it will do it again. In my app It seems to do it almost all the time and it might be because i'm loading a lot more info on the page its routing to but i'm not sure.