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.

[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}

[JoanaZento]

Hi, can this be related to https://github.com/ionic-team/ionic/issues/18130 ? We are experiencing both issue on builds for IPad onto IOS 12.4 ..

ionic info Ionic:

Ionic CLI : 5.2.1 (/Users/zento/.nvm/versions/node/v10.16.0/lib/node_modules/ionic) Ionic Framework : @ionic/angular 4.6.2 @angular-devkit/build-angular : 0.13.9 @angular-devkit/schematics : 7.3.9 @angular/cli : 7.3.9 @ionic/angular-toolkit : 1.5.1

Cordova: Cordova CLI : 8.0.0 Cordova Platforms : ios 4.5.5 Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 5 other plugins)

Utility: cordova-res : 0.6.0 native-run : 0.2.8

System: ios-deploy : 2.0.0 NodeJS : v10.16.0 (/Users/zento/.nvm/versions/node/v10.16.0/bin/node) npm : 6.9.0 OS : macOS Mojave Xcode : Xcode 10.3 Build version 10G8`

[m0rhadin]

Are there any new ideas on this? Still facing this issue with ionic v4 when using ion-button with navigation to a new page.

[rapelt]

Im still seeing this issue on Android and Chrome.

[FractalMind]

Any news on this?

[FractalMind]

I have noticed if I add a delay to the async function to display a modal

 this.modalSingleton = await this.modalCtrl.create({
              component: MyModal
        });
  await new Promise(r => setTimeout(r, 150)); // <= Here
  await this.modalSingleton.present();

It will give enough time to display the ripple just before opening the modal. It's a very weird and dirty hack

[liamdebeasi]

Thanks for the issue. I tested this on the latest version of Ionic 6 with iOS 15 and am no longer able to reproduce the issue. I am going to close this, but please feel free to open a new issue if you are still running into problems. 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.