@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

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

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’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

@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.

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!

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?

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

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);
            }
        );
    }

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.

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

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

Sorry liam! It’s already published.

@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.

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!

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.