Original issue by @MontyTRC89 on 2019-07-23T14:42:18Z

Bug Report

Ionic version:

[x] 5.x

Current behavior: I have a multiple tabs appp. When I first visit a tab with a full screen iframe inside, at fist visit content falls below ion-tabs. Then I change bar, return back to the iframe tab and now height is correct.

Expected behavior: Content (and iframe) should fill the area between header and footer tabs always.

Steps to reproduce:

Related code:

<ion-header>
  <ion-navbar>
    <ion-buttons start>
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>  
      </button> 
    </ion-buttons>
    <ion-buttons end>
      <button ion-button (click)="apriImpostazioniSkymap()">
        <ion-icon name="settings"></ion-icon>  
      </button> 
        <button ion-button (click)="geolocalizza()">
        <ion-icon name="locate"></ion-icon>  
      </button> 
    </ion-buttons>
    <ion-title><img src="assets/imgs/logo-header-lungo.png" /></ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
    <iframe id="skymap" [src]="sanitizer.bypassSecurityTrustResourceUrl(urlSkymap)"></iframe>
</ion-content>

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController, ModalController, Content } from 'ionic-angular';
import { ConfigurazioneProvider } from '../../providers/configurazione/configurazione';
import { BrowserModule, DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser'
import { HostListener } from '@angular/core'
import { ImpostazioniPage } from '../impostazioni/impostazioni';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import { UtilsProvider } from '../../providers/utils/utils';

@IonicPage()
@Component({
  selector: 'page-mappa',
  templateUrl: 'mappa.html',
})
export class MappaPage {
  private urlSkymap: string = "someurl";
  private latitudine: number =0;
  private longitudine: number = 0;

  @ViewChild(Content) content: Content; 

  public constructor(public navCtrl: NavController, public navParams: NavParams, private conf: ConfigurazioneProvider, 
                     private sanitizer: DomSanitizer, private viewCtrl: ViewController, private modalCtrl: ModalController,
                     private geolocation: Geolocation, private utils: UtilsProvider) {

  }

  private ionViewDidLoad() {
    this.geolocalizza();
    this.urlSkymap = this.getSkymap();
  }

  private getSkymap() {
    this.content.resize();
    return "someurl?" + 
                "&stelle=" + (this.conf.stelle ? 1 : 0) +
                "&nomiStelle=" + (this.conf.nomiStelle ? 1 : 0) +
                "&costellazioni=" + (this.conf.costellazioni ? 1 : 0) +
                "&nomiCostellazioni=" + (this.conf.nomiCostellazioni ? 1 : 0) +
                "&pianeti=" + (this.conf.pianeti ? 1 : 0) +
                "&nomiPianeti=" + (this.conf.nomiPianeti ? 1 : 0) +
                "&griglia=" + (this.conf.griglia ? 1 : 0) +
                "&meridiano=" + (this.conf.meridiano ? 1 : 0) +
                "&eclittica=" + (this.conf.eclittica ? 1 : 0) + 
                "&latitudine=" + this.latitudine +
                "&longitudine=" + this.longitudine;
  }

  private apriImpostazioniSkymap() {
    let myModal = this.modalCtrl.create(ImpostazioniPage, { });

    myModal.onDidDismiss(() => {
      this.conf.salvaConfigurazione();
      this.content.resize();
      this.urlSkymap = this.getSkymap(); 
    });

    myModal.present();
  }

  private geolocalizza(){
    this.geolocation.getCurrentPosition().then((res) => { console.log(res);
        if (res.coords.latitude != 0) this.latitudine = res.coords.latitude;
        if (res.coords.longitude != 0) this.longitudine = res.coords.longitude;
        this.urlSkymap = this.getSkymap();

    }).catch((error) => {
        /*this.utils.messageboxInformazioni("Errore", "Si è verificato un errore durante la geolocalizzazione. L'app userà come posizione il Lago di Garda." , function() {});*/

        console.log(error);

        this.latitudine = 0;
        this.longitudine =0;
        this.urlSkymap = this.getSkymap();
    });
  }
}

Other information:

Ionic info:


Ionic:

   Ionic CLI          : 5.2.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.0.0, browser 5.0.3, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-webview 1.1.1, (and 13 other plugins)

Utility:

   cordova-res : 0.5.2 (update available: 0.6.0)
   native-run  : 0.2.7 (update available: 0.2.8)

System:

   Android SDK Tools : 26.1.1 (/Users/marco/Library/Android/sdk/)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.1
   NodeJS            : v11.14.0 (/usr/local/Cellar/node/11.14.0/bin/node)
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.2 Build version 10E125

ionic-team / ionic-v3

bug: Wrong height of content first tab visit #1046

Bug Report