pageB has ion-segment in ion-navbar, when push A to B, there has a white blank between A and B.

[longdw]

Resources:
Before submitting an issue, please consult our troubleshooting guide (http://ionicframework.com/docs/troubleshooting/) and developer resources (http://ionicframework.com/docs/developer-resources/)

Please make sure you are posting an issue pertaining to the Ionic Framework. If you are having an issue with the Ionic Pro services (Ionic View, Ionic Deploy, etc.) please consult the Ionic Pro support portal (http://support.ionicjs.com)

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x ] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
pageB has ion-segemnt in ion-navbar, when I push pageA to pageB or pageB back to pageA, there has a white blank between pageA and pageB.

Related code:

<ion-header>
    <ion-navbar>
        <ion-segment [(ngModel)]="type" *ngIf="showSegment">
            <ion-segment-button value="1" (ionSelect)="doRefresh1(null)">
                我的
            </ion-segment-button>

            <ion-segment-button value="2" (ionSelect)="doRefresh2(null)">
                其他人
            </ion-segment-button>
        </ion-segment>
        <ion-buttons end (click)="set()">
            <button ion-button clear>设置</button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content [ngSwitch]="type">
    <ion-content *ngSwitchCase="1">
        <ion-card tappable *ngFor="let item of guardDatas;let i = index;" (click)="itemClick1(item)">
            <ion-card-content class="list-style">
                <div class="main-title" style="display: flex;">
                    <span style="flex: 1;">{{item.week}}</span>
                    <span style="flex: 1;">{{item.date}}</span>
                </div>
                <p text-wrap class="sub-title" style="margin-top: 0.5rem;">{{item.guardStatus}}</p>
                <div style="display: flex;margin-top: 0.5rem;">
                    <p text-wrap class="sub-title" style="flex: 2;align-self: center;">{{item.schedule}}</p>
                    <button ion-button style="flex: 1;float:right;">
                        删除
                    </button>
                </div>
                
            </ion-card-content>
        </ion-card>
    </ion-content>

    <ion-content *ngSwitchCase="2">
        <ion-list tappable *ngFor="let item of datas;let i = index;" (click)="itemClick2(item)">
            <ion-item *ngFor="let item of departDatas">
                <ion-label>
                    {{item.title}}
                </ion-label>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-content>

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

System:

    Node : v7.2.1
    npm  : 4.0.5 
    OS   : macOS Sierra

test on ios10 or ios11

[cyberbobjr]

same problem here : flickering when i switch page from a navbar with push and pop.
Works before the last update.
Tested on ios11

[kensodemann]

Hello! Thank you for opening an issue with us! Would you be able to provide a sample application via GitHub that demonstrates the issue you are having? Thanks for using Ionic!

[longdw]

@kensodemann hi, thank you for your reply, this is github example.

[kensodemann]

@longdw - tried running your sample but cannot. app.component.ts contains the following reference, which does not exist: import { FirstPage } from '../pages/first/first';

[mhartington]

@longdw any chance you could update your example? It's missing functionality so we cannot test it .

Either way, could you follow:

1. http://blog.ionic.io/ios-11-checklist/
2. Install ionic-angular@nightly?

[longdw]

@kensodemann @mhartington I uploaded a new code， example

[longdw]

this question still exists. @kensodemann @mhartington

[mhartington]

@longdw sorry, thought I hit reply on this.

So the issue you're seeing is really due to the multiple ion-contents in the second page. There should only ever be ONE ion-content in a page, otherwise, you get unexpected results. For example, to rework the setup you had, I applied this patch to home.html.

diff --git a/src/pages/home/home.html b/src/pages/home/home.html
index 5621ad4..e235287 100644
--- a/src/pages/home/home.html
+++ b/src/pages/home/home.html
@@ -12,9 +12,10 @@
     </ion-navbar>
 </ion-header>
 
-<ion-content style="background-color: #f5f0eb" [ngSwitch]="type">
-    <ion-content *ngSwitchCase="1">
-    
+<ion-content >
+  <div [ngSwitch]="type">
+    <div *ngSwitchCase="1">
+
         <ion-card tappable *ngFor="let item of guardDatas;let i = index;" (click)="itemClick1(item)">
             <ion-card-content class="list-style">
                 <div class="main-title" style="display: flex;">
@@ -28,13 +29,13 @@
                         删除
                     </button>
                 </div>
-                
+
             </ion-card-content>
         </ion-card>
-    </ion-content>
+    </div>
+
+    <div *ngSwitchCase="2">
 
-    <ion-content *ngSwitchCase="2">
-    
         <ion-list tappable *ngFor="let item of datas;let i = index;" (click)="itemClick2(item)">
             <ion-item *ngFor="let item of departDatas">
                 <ion-label>
@@ -42,5 +43,6 @@
                 </ion-label>
             </ion-item>
         </ion-list>
-    </ion-content>
-</ion-content>
\ No newline at end of file
+      </div>
+      </div>
+</ion-content>

Because the ion-content is no longer part of dynamic content directly, and the child elements are all divs, the animations runs smooth.

[longdw]

thank you very much. @mhartington

[longdw]

there has some issue, I add ion-refresher between div, refresher can't be displayed correctly ,and I add ion-header in first.html, when back from HomePage, the segement stays on the navigation bar for a few seconds. I update the code github @mhartington

[mhartington]

Put the ionRefresher as a direct child of the ion-content. This is stated in the Refresher docs.

https://ionicframework.com/docs/api/components/refresher/Refresher/

Here's my markup

[ionitron-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.