Router navigate on Ionic with animation blinking on ios using angular animations

Question

I am setting page transitions between two pages on Ionic (v4) with @angular/animations and it all works great on chrome but not on safari.

On a simple app only with two

Answer 1

I'll add this answer since it's a bit long to be a comment. As we discussed in the comments, the issue is because your animation is conflicting with the default iOS page transition animation

The recommended way to fix this issue would be to create your own page transition animation as you can see in this answer. Doing that would apply your custom animation overriding the default "animation" of all ion-nav and ion-router-outlet across the whole application.

If for some reason you just want to use Angular animations on each and every page - like you're doing in your code by using something like

<ion-content [@fadeIn]='anim'> 
  ...
</ion-content>

you can disable Ionic's default page transition animations via the Config:

animated: boolean | If true, Ionic will enable all animations and transitions across the app.

@NgModule({
  // ...
  imports: [
    // ...
    IonicModule.forRoot({
      animated: false
    }),
  ],
  //...