Ionic-framework: Ion-tab content not show correctly after updating to Ionic 3

[giorgiopiatti]

Ionic version: (check one with "x")
[ ] 1.x
[ ] 2.x
[X ] 3.x

I'm submitting a ... (check one with "x")
[ X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

After updating to Ionic 3 I see this issue, before all was working great.

When I first load the tabs page the content doesn't show correctly, if I go to an other tab and return to the first one all work properly.

Expected behavior:

I expected that the tab doesn't cut the content on the first load

Steps to reproduce:

Related code:

<ion-header>
    <ion-navbar>
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
      <ion-title>Routines</ion-title>
    </ion-navbar>
  </ion-header>
<ion-content padding>
<ion-list>
<ion-item-sliding #item *ngFor="let routine of data | async">
  <ion-item >
    <h1 class="elementTitle">
        <b>{{routine.title}}</b>
    </h1>
    <h3 class="elementSubTitle">
      {{routine.tag}}
    </h3>
    <p>
      {{routine.description}}
    </p>
  </ion-item>
  <ion-item-options side="right">
    <button ion-button icon-left (click)="presentEditModal(routine)">
      <ion-icon name="brush" >Modify</ion-icon>
    </button>
    <button ion-button icon-left (click)="deleteConfirm(routine)">
      <ion-icon name="trash">Delete</ion-icon>
    </button>
  </ion-item-options>
</ion-item-sliding>
</ion-list>
<ion-fab right bottom>
  <button ion-fab mini color="accent" (click)="presentAddModal()">
    <ion-icon name="add"></ion-icon>
  </button>
</ion-fab>
</ion-content>

Other information:

The problem happens with Ionic Serve and also on Android Mobile device.

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

Cordova CLI: 6.5.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v7.8.0
Xcode version: Not installed

[jgw96]

Hello, thanks for using Ionic! Could you share a repo we could use to reproduce this issue?

[giorgiopiatti]

I tried to create a basic plunker (https://plnkr.co/edit/5uxMSg?p=preview) but I can't reproduce the issue, despite in my application the issue continues to persist.

[giorgiopiatti]

I've circumscribed the issue

DOM code when I see the problem

[...]
<ion-content fullscreen="true" class="content content-md"><div class="fixed-content" style="margin-bottom: 56px;">

<div class="scroll-content" style="padding-bottom: 56px;">

<ion-list class="list list-md">[...]</ion-list>

</div>

</ion-content>

[...]

DOM code when all works fine

[...]
<ion-content fullscreen="true" class="content content-md"><div class="fixed-content" style="margin-top: 56px; margin-bottom: 56px;">

<div class="scroll-content" style="padding-top: 56px; padding-bottom: 56px;">

<ion-list class="list list-md">[...]</ion-list>

</div>

</ion-content>

[...]

It seems that padding-top and margin-top CSS property aren't loaded on the first time.

[jgw96]

Thanks for the reply! Since this issue seems to be caused by some of your custom css I am going to close this issue for now and ask that you go to our forum with your question.

[ourarash]

@jgw96 : Please do not close the issue. I have the same problem. It happened when I updated to Ionic 3. Exactly the same behavior as @giorgiopiatti

[Avrahqedivra]

@jgw96 : same issue here too... I have the problem when trying to access a tab dynamically using .select(tabNumber)

[argentinaluiz]

@jgw96 @Avrahqedivra Me too.

[SRV-Garg]

I am also having the same issue when load dynamically margin-top is not picked automatically

[gustavobrian]

yes, Please do not close the issue. I have the same problem.!!!

[richguo0615]

I have the same problem...

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