Ripple effect flickers multiple times on emulator/device

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]

Thanks! I was able to reproduce this issue. We will look into it!

[kyleabens]

Thanks! I was able to reproduce this issue. We will look into it!

@liamdebeasi I don’t know if this helps narrow down the issue but I’ve noticed that any element that uses the ripple effect AND generates a component in the html when clicked (pages, segments etc.) will flicker. If you’re using ion-segment and you hide and show the content there is no flicker but if you use *ngIf or *ngSwitchCase on the content then the flicker occurs.

_{Sent with GitHawk}