Bug: Ionic 4 Strange flickering on page navigation transitions

[rodrigojrmartinez]

Bug Report

Ionic version: [x] 4.0.0

Current behavior: Having an ionic 4 app with Angular, and navigating to different pages by the use of Angular's Router causes a strange flickering in which you can see the previous page you were at while the new page is coming into the view.

All pages have a matching module for lazy loading, and one module may render more than one page component, resulting on a nested structure of ion-router-outlets

Expected behavior:

The navigation should happen with a clean transition, not flickering to the previous page

Steps to reproduce:

The main app component has the ion-app tag and a main ion-router-outlet. which will show the main page, either login or dashboard.

When showing the dashboard, it has a ion-content tag that then renders another ion-router-outlet which will show the specific content for the page you are at.

All pages are defined with a module soy the lazy load, some of them have further pages so they have extra ion-router-outlets

Related code:

App component

<ion-app>
    <ion-router-outlet></ion-router-outlet>
</ion-app>

which renders Dashboard page

<header></header>
<ion-content>
    <ion-router-outlet></ion-router-outlet>
</ion-content>

which renders a specific feature page, if there's no further navigation, then the code for the page goes there, but if there are extra pages you may navigate to from that point, then I have an extra router-outlet and based on routing the code of the proper page is render

<ion-router-outlet name="feature-page"></ion-router-outlet>

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.9.0 (C:\Users\rodrigomartinezjr\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.1
   @angular/cli                  : 7.3.0
   @ionic/angular-toolkit        : 1.3.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : not available
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 16 other plugins)

System:

   NodeJS : v10.14.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.7.0
   OS     : Windows 10

[liamdebeasi]

Hi there,

Thanks for the issue! Can you try this with the latest version of Ionic? There have been a few navigation/animation fixes that have gone in since 4.0.

If you are still encountering the issue after updating, can you provide a repository with the code required to reproduce this issue?

Thanks!

[hinzunza]

I have the same issue!! Please help.

[felipeclopes]

I'm facing a similar issue as well when navigating from one page to another, it started happening after I upgraded from ionic 3 to ionic 4.

What happens

Ionic Info

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/Users/felipeclopes/.nvm/versions/node/v11.12.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.3.1
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.4.1

Cordova:

   cordova (Cordova CLI) : 9.0.0
   Cordova Platforms     : ios 5.0.0
   Cordova Plugins       : cordova-plugin-ionic 5.3.0, cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 8 other plugins)

System:

   ios-sim : 7.0.0
   NodeJS  : v11.12.0 (/Users/felipeclopes/.nvm/versions/node/v11.12.0/bin/node)
   npm     : 6.9.0
   OS      : macOS Mojave
   Xcode   : Xcode 10.2.1 Build version 10E1001

[joelebeau1]

Myself and multiple members on my team have been dealing with these transition animation bugs since upgrading to Ionic 4

[rodrigojrmartinez]

Hi there,

Thanks for the issue! Can you try this with the latest version of Ionic? There have been a few navigation/animation fixes that have gone in since 4.0.

If you are still encountering the issue after updating, can you provide a repository with the code required to reproduce this issue?

Thanks!

Hi liam, thanks for the quick response! I did upgrade to version 4.3 and I can notice some difference. Navigation and load times are faster! which is a great thing. The flickering got reduced but the transition is not as smooth as you would expect.

On my side, we are undergoing with some design changes so I'm restructuring several things on my project. I believe I made some mistakes on structuring pages. I had one main header and one main content with a router-outlet which could show nested router-outlets itself. It happened that my pages which got injected used extra ion-headers which I assume may have some css issues when coming into the view and may cause a not so smooth transition (while the previous view is yet on the screen).

[liamdebeasi]

Thanks for the feedback everyone! We are definitely aware of this and are working on determining what the issue is. In the meantime, repositories with code that reproduces this issue would be very helpful.

Also, I am going to link an issue that might be related: https://github.com/ionic-team/ionic/issues/17494

Thanks!

[felipeclopes]

To update my findings, I found the issue on my navigation animation. I was assigning focus to an element on the ngOnInit to an ion-input, which for some reason was breaking the animation — removing that, it all went back to normal.

This is the proper issue number to my issue: https://github.com/ionic-team/ionic/issues/17107

[bastiantowers]

I'm facing a similar issue. I do not detect this on the browser or in a real Android Device. I detected it using the iOS Simulator. I couldn't test it on a real iPhone yet but I will soon and see what happens. What I see is a very quick flash over the previous view before the transition to another view, and it is really annoying 😞

We are using linear gradients in our app, using background-image properties, so I thought it could be related to #17494 . I tried to remove every linear gradient we were using it, but it didn't change the behavior at all.

Here is my ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (.../.nvm/versions/node/v11.10.1/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.3.0
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.3.8
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   cordova (Cordova CLI) : 6.5.0
   Cordova Platforms     : android 6.3.0, ios 4.3.1
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 11 other plugins)

System:

   Android SDK Tools : 25.2.5 (.../Library/Android/sdk)
   NodeJS            : v11.10.1 (.../.nvm/versions/node/v11.10.1/bin/node)
   npm               : 6.7.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

I will be closer to this issue to see if there is something new to try on.

[vidhema]

I'm facing a similar issue. I do not detect this on the browser or in a real Android Device. I detected it using the iOS Simulator. I couldn't test it on a real iPhone yet but I will soon and see what happens. What I see is a very quick flash over the previous view before the transition to another view, and it is really annoying 😞

We are using linear gradients in our app, using background-image properties, so I thought it could be related to #17494 . I tried to remove every linear gradient we were using it, but it didn't change the behavior at all.

Here is my ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (.../.nvm/versions/node/v11.10.1/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.3.0
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.3.8
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   cordova (Cordova CLI) : 6.5.0
   Cordova Platforms     : android 6.3.0, ios 4.3.1
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 11 other plugins)

System:

   Android SDK Tools : 25.2.5 (.../Library/Android/sdk)
   NodeJS            : v11.10.1 (.../.nvm/versions/node/v11.10.1/bin/node)
   npm               : 6.7.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

I will be closer to this issue to see if there is something new to try on.

I got the same issue .. navigation transition is not as smooth as it should

[thejaa]

I'm facing a similar issue. I do not detect this on the browser or in a real Android Device. I detected it using the iOS Simulator. I couldn't test it on a real iPhone yet but I will soon and see what happens. What I see is a very quick flash over the previous view before the transition to another view, and it is really annoying 😞 We are using linear gradients in our app, using background-image properties, so I thought it could be related to #17494 . I tried to remove every linear gradient we were using it, but it didn't change the behavior at all. Here is my ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (.../.nvm/versions/node/v11.10.1/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.3.0
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.3.8
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   cordova (Cordova CLI) : 6.5.0
   Cordova Platforms     : android 6.3.0, ios 4.3.1
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 11 other plugins)

System:

   Android SDK Tools : 25.2.5 (.../Library/Android/sdk)
   NodeJS            : v11.10.1 (.../.nvm/versions/node/v11.10.1/bin/node)
   npm               : 6.7.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

I will be closer to this issue to see if there is something new to try on.

I got the same issue .. navigation transition is not as smooth as it should

@vidhema did you found any solution.

[ghost]

Ionic:

   Ionic CLI                     : 5.0.3 (C:\Users\Parth\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.5.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Utility:

   cordova-res : 0.3.0
   native-run  : not installed

System:

   NodeJS : v10.15.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

I am getting the same issue. I basically imported the router module in the app.module.ts to use ion-segment to navigate to different pages which are lazy loaded by default. This issue is still not fixed I guess but I trust the team to fix it soon.

[rodrigojrmartinez]

An update regarding this matter. Now I have changed the whole structure of the application and I still have problems on ios emulator in chrome (for android I don't have flickering but its not as smooth as you would expect).

One question to any Ionic team member out there, What is the 'expected' or 'recomended' way to arrange your pages?

Because now I have one login page, and a dashboard page. They both get injected on the main router outlet from app component.

From the dashboard page onwards I have an extra router outlet which will load any page you navigate to after logging in.

• Each page has its own header (some with just a transparent toolbar with a menu icon, some others with a gradient background, some other with white background and border)
• There may be extra router outlets on a page which may allow you to navigate further
• Some pages even have a footer - like forms for the submit button
• For some pages there may be a background image on the main content

First approach I followed was to have the header in the dashpage and adapt its properties based on the navigated page. This resulted on an ugly transition in Andoird, since views slides from bottom to top as a whole and there's a fixed header that doesn't come with the content but remains and its properties changes. on Ios, that have transitions that slide right to left, the header remained and adapted in a smooth way while the content came in.

Then I changed so each page may have its own header with its configuration depending the case. This improved the experience on Android (though I notice that the content and the header doesn't come in or leave smooth together, one appears or hides before the other it seems but it not that evident). With this, the transitions on ios are not nice at all because the header suddenly 'appears' and the content comes in with a transition. More over, having an image as the main content background makes it quite buggy for the content that comes in.

Which way would you recommend to have a nice transition on both platforms?

[ghost]

@rodrigojrmartinez So I was using ion-segment to navigate. Switching to tabs helped solve the issue. I don't know why this worked but it worked. Using ion-tab solved this issue for me and I am going to stick with it for temporary fixes. Also, on a side note, you could use Augury extension to see a router map instead of manually creating one yourself :)

[rodrigojrmartinez]

@Parth-Agarwal thanks for the reply. I do have augury but the router map is much more extensive and complex than that, I arrange those images to show the main idea behind my routers.

---

Another update on this. If you check previous images you will notice I have <ion-header>... this is not entirely correct. I wrapped up the header onto a shared component that renders the actual header and has some inputs to configure how the header should render on each page. For both approaches.

After playing around I discovered that this is for sure a problem. I came to the conclusion you can't wrap up fixed sections of a page such as header and footer onto dedicated components to be used across the app. This breaks the transitions from page to page, specially on iOs.

What I ended up doing was to re-write the header on each page with the proper config for each one and then the navigation is much more smoother =) I'm following the approach of the second image in my previous comment. My only problem now is that on iOs when navigating back the header that is 'leaving' has a delay to disappear before it adapts and the 'incoming' header is shown (web emulator). When navigating forward it works great!. The following gif shows the behaviour

I hope it helps! Would be nice to hear from someone from the Ionic team to see if they can reproduce and acknowledge this is a common issue

[liamdebeasi]

Hi everyone,

As I mentioned in my previous post, any GitHub repos that show this issue in action would be greatly appreciated! Code snippets don't help as much as we oftentimes need to see how your app is setup in order to get a better context of the issue.

Thanks!

[ptesser]

Hi @liamdebeasi You can find the issue replicated with a custom header in this repository: https://github.com/ptesser/ionic-smooth-header-footer-issue

I have used the NavController service to trigger a back action in my custom header, instead the footer is embedded in a page with this route: http://localhost:8100/logistic-stage-detail/:id

We you'll run the app, go to http://localhost:8100/plans route and click on an item on the list.

That page will be have the custom header.

[liamdebeasi]

Thanks! Ok yeah I have a better picture of what the issue is. I agree that this seems to be caused by wrapping ion-header and ion-footer in custom components.

I am going to discuss with the team possible solutions and will post here when I have an update. Thanks!

[liamdebeasi]

It appears that this issue is happening because Ionic selects elements to animate using the :scope pseudo-class.

Normally toolbars, buttons, etc are scoped within your page component, but once you wrap your ion-header in a custom component, they become scoped with that custom component. In short, this changes the scope context when using :scope. Example: https://github.com/ionic-team/ionic/blob/master/core/src/utils/transition/ios.transition.ts#L27

I have published a dev build to remove :scope from the query selectors; however, I am still evaluating if there are any negative tradeoffs. Using :scope is supposedly faster than not using it, but it seems there is still a bug surrounding that: https://bugs.chromium.org/p/chromium/issues/detail?id=222028

It would be great if people could test and provide feedback. You can install the dev build using npm i @ionic/angular@4.8.0-dev.201907302047.774a918.

Thanks!

[ptesser]

@liamdebeasi Thanks for the update.

I have tried it, but the issue still persist on my project. I have updated it with the latest build as you suggest, but I have the same behavior.

You could check the repository link above with 2 new commit.

Best Regards, Paolo

[liamdebeasi]

@ptesser The behavior very smooth when I test in Chrome on macOS. Are you testing on another platform/device?

Here's a GIF of the app in Chrome:

I know the footer buttons don't seem quite right, but that's because they are not wrapped in an ion-toolbar.

[ptesser]

@liamdebeasi Oh sorry, I'm referring to the footer, but my mistake for missing ion-toolbar wrapper. For the header I confirm that it's better.

[liamdebeasi]

No problem 🙂. After wrapping the buttons in ion-toolbar, does everything seem to be working now?

[ptesser]

I havent't tried yet. I will let you know in the next hours. Thanks.

[ptesser]

@liamdebeasi Confirm that everything seem to work after wrap.

[rodrigojrmartinez]

Hi @liamdebeasi in my case the problem still remains. Maybe it has to do with something about how the routes and outlets are arranged. I manage to create a test repository to check the behaviour. https://github.com/rodrigojrmartinez/crazy-header

Navigating forward has also an issue in this case since I've defined a transparent background to ion-content elements globally which is useful for the first pages (home and main) which shows a background image but breaks transitions to pages with no image background. The workaround was to set a white background to further pages (you can try removing the style applied on first.page.scss and second.page.scss).

On back navigation you can see what is posted on the GIF from my previous comment. Thank you a lot for taking time into reviewing this!

[liamdebeasi]

@rodrigojrmartinez This looks like a blank Ionic starter. Did you push your changes to the repo?

[rodrigojrmartinez]

Sorry liam! It's already published.

[liamdebeasi]

Thanks for publishing those changes.

There appear to be two issues in this GitHub thread:

1. One issue is happening when users try to wrap ion-header and ion-footer in a custom component.
2. The other issue happens when users try to nest ion-router-outlet components.

It looks like your example nests router-outlets. There are some known issues with router-outlets (https://github.com/ionic-team/ionic/issues/18823), so I don't recommend heavily relying on them until we can resolve those issues.

Regarding the first issue, removing :scope fixes the initial issue of wrapping ion-header and ion-footer in custom components; however, this will cause issues when users have nested ion-nav components. We are still investigating how to properly deal with this behavior.

[rodrigojrmartinez]

Hi @liamdebeasi

Thank you so much for your response, this clarifies a lot. The reason I used nester router outlets was to 'group' related functionalities. Now on the mock up I've arranged, I change it so as to have a single one.

The experience indeed got improved but I still have some issues among transitions, I wonder if this has to do with the custom style I'm applying both to the ion-header and ion-toolbar contained inside it, more related to border, box shadow and min-height (defined on variables.scss).

I also believe that having pages with different background colors headers causes some impact on the transition, since you see first the content of the new header that comes into the view and it is when the transition finishes that the color switches.

Do you have any suggestions regarding this? I've pushed the changes into the github repository.

Thanks once again!

[AndrewReal0]

Hi, someone has find a solution ?

[AndrewReal0]

I have the same problem and I have not been able to solve it

[rodrigojrmartinez]

For the moment I've followed liams advice.

• I structured my app to have a single router-outlet
• I use the standard height the ionic header has by default
• I removed border and bottom box shadow of the ionic toolbar contained in the header
• I kept an uniform background across all headers

Now it's decent. The only drawback I currently have is that when navigating back there's a small delay between the header that its leaving and the one that's entering. Let's hope on further versions this will become more flexible to use!

[climbican]

I have the same issue on the splashscreen as it fades out and on page transitions from a list view component.

[MohamedFekry007]

Is there any update regarding this issue?

[blasco]

I'm also having weird animation with nested ion-router-outlets, I thought it was a great way to organize the app, and after switching to them it looks really bad... so time to undo the job.

[Abhishervarma]

Hi

i am using the ionic4 app its navigated the main page in baground but its still splash is displaying ho can i use this i am using with capacitor

[summxu]

Hi, i use ionic-React the problem : “ previous page nav bar stays for a while until transition animation finish” still arises , when I moved my ion-toolbar to pages , that doesn't work either

[C-racker]

The page flickering in the presence of ngif At present only ionViewDidEnter can be used to solve the problem

[Praveenram87]

We have a very similar issue - Observed only on iOs devices - the page blinks for a second before navigating - When I turned off the animation the flickering goes away OR when I modify the ion-content to a div , the flickering goes away. I don't have any background image with ion-content, no nested router-outlets. I am using the latest version of everything (ionic4 and Angular). Even when i remove all the code and keep a simple button for navigating, the page still blinks. This issue is seen throughout the app. We are completely out of option at this point - any help would be greatly appreciated.

[FabianRuizF]

We have a very similar issue - Observed only on iOs devices - the page blinks for a second before navigating - When I turned off the animation the flickering goes away OR when I modify the ion-content to a div , the flickering goes away. I don't have any background image with ion-content, no nested router-outlets. I am using the latest version of everything (ionic4 and Angular). Even when i remove all the code and keep a simple button for navigating, the page still blinks. This issue is seen throughout the app. We are completely out of option at this point - any help would be greatly appreciated.

I was having the same issue (flickering on using back button) ,even if i was just using the header with a button. For example (this flickers):

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/student-page"></ion-back-button>
    </ion-buttons>
    <ion-title>Something</ion-title>
  </ion-toolbar>
</ion-header>

So instead of using normal routing on html, i did this

On .html file:

<ion-header>
    <ion-toolbar>
            <ion-button slot="start" (click)="goBack()" fill="clear">
                <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
          </ion-button>
      <ion-title>
       Something
      </ion-title>   
    </ion-toolbar>  
  </ion-header>

On .ts file:

import { Router } from '@angular/router';
...
  constructor(
    ...
    private router: Router, 
    ...
  ) {  }
...
  goBack(){
    this.router.navigateByUrl('/student-page');
  }

With this, at least for me, it stopped the fickering.

Hope it helps, and sorry if the style coding is not the best :P .

[christophwestermann]

I had a quite identical stuttering of the ion-content on page switches. It turnes out that it was related to a API request that was fired on page load, i've added a short timeout before the request kicks in and now the transition is smooth again. Maybe it helps as a workaround:

before:

ngOnInit(): void {
        this.activatedRoute.paramMap.subscribe(
            (params: ParamMap) => {
                this.refreshData(params.get('id'));
            }
        );
    }

after:

    ngOnInit(): void {
        this.activatedRoute.paramMap.subscribe(
            (params: ParamMap) => {
                setTimeout(() => {
                    this.refreshData(params.get('id'));
                }, 350);
            }
        );
    }

[Praveenram87]

The issue that I posted above is related to this - https://github.com/ionic-team/ionic/issues/17649 We were able to reproduce the same on ionic4 CLI app as well when I downgraded to UIWebview. The actual issue is on Safari webkit - https://bugs.webkit.org/show_bug.cgi?id=201048. As of now neither ionic team or webkit Team seems to be actively work on it with an ETA. I believe the issue will be resolved when upgrading to WkWebview , but that has its own set of challenges - so we are hoping someone would work towards providing the fix.

[liamdebeasi]

Hi everyone,

I wanted to provide an update here so the wrong information doesn't get spread around. There seem to be three issues being discussed in this thread:

1. The first issue pertains to wrapping ion-header and ion-footer in custom components. See my comment here for an explanation: https://github.com/ionic-team/ionic/issues/18130#issuecomment-516594342.

2. The second issue pertains to nesting ion-router-outlet components which have a few known issues associated with it. See my comment here for an explanation: https://github.com/ionic-team/ionic/issues/18130#issuecomment-517328001.

3. The third issue that is being brought up is related to a WebKit issue. See my comment here for an explanation: https://github.com/ionic-team/ionic/issues/17649#issuecomment-542204919. Some have noted that neither Ionic nor WebKit are investigating this issue. This is incorrect. We have been investigating this and have posted a temporary workaround in the thread I linked to. Additionally, we have been in touch with the WebKit team and they are actively looking into this issue as well.

We appreciate everyone's patience as we work to resolve these issues. For those whose issues do not fall into any of the three issues, please create a new issue and we will investigate. Thanks!

[Praveenram87]

Thank you 'liamdebeasi' - WRT to issue(3), my major concern was the ETA , but thank you for closely working with Webkit team on this one. Could you please rephrase the workaround that you had mentioned on the thread #17649 (comment) - cz even with no major code on ts layer , we are still able to reproduce the issue (Do you mean moving the logic to ionViewDidEnter ? - we tried that, but did not work)

[liamdebeasi]

@Praveenram87 We'd love to provide an ETA, unfortunately accurate ETAs are hard to predict for issues like these.

Regarding the workaround, you should make sure that you are not updating the view of the entering page during the transition. So for example, having an *ngIf on the entering page that is constantly updating during the animation is likely going to cause the issue to appear. In this case, one solution would be to use ion-skeleton-text to show placeholder content rather than the actual content. This will allow you to avoid any view updates mid-transition and not have a white screen before your actual data is loaded in.

[Praveenram87]

Thank you Liam DeBeasi.

[LeoHub-dev]

Ionic:

Ionic CLI : 5.4.6 Ionic Framework : @ionic/angular 4.11.7 @angular-devkit/build-angular : 0.803.22 @angular-devkit/schematics : 8.1.3 @angular/cli : 8.1.3 @ionic/angular-toolkit : 2.1.1

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1) Cordova Platforms : android 8.1.0 Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 4 other plugins)

Utility:

cordova-res : not installed native-run : not installed

System:

NodeJS : v12.13.0 npm : 6.12.0 OS : Windows 10

There is any workaround for the shadow left behind for the header on this transition error?

This only happens with the Global mode set to "ios". I just have one router, and it's a basic app.

Here is a repo: https://github.com/LeoHub-dev/medic

[jeric17]

• @ionic/react: 5.0.0
• @ionic/react-router 5.0.0

I still experience this when navigating to the same route but with different parameters. /react/home /react/catalogue

The page will render a different content base on the params

[jdpsbh]

Have same problem using ion-content and ion-list. Seems the problem occurs with ios mode. For me, fixed it setting the ion-content mode as "md" and "force" ion-list back to ios.

ion-content mode="md" ion-list mode="ios"

Cheers

[ricky-sb]

I'm using Nuxt with Ionic and Tailwind. For me, this was a CSS issue. I was able to solve it by configuring purgeCSS to not delete any of Ionic's classes.

I added this to my nuxt.config.js file:

purgeCSS: {
  paths: ['./node_modules/@ionic/**/*.css'],
},