position: corrigé ne fonctionne pas sous iOS lors du chargement du site angulaire dans iframe dans Ionic 3

Avez-vous essayé de définir tout le mode d'application / style de plate-forme sur md via la configuration de l'application? Si vous parvenez à résoudre ce problème sur Android, peut-être que l'adoption de styles Android globalement pour la version iOS le résoudra également pour cette plate-forme?

// app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  imports:      [ 
    BrowserModule, FormsModule,
    IonicModule.forRoot({
      mode: 'md'
    }),  
  ],
  declarations: [ AppComponent, HeaderComponent, FooterComponent, HomeComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Je ne suis pas familier avec ionic et votre configuration angulaire mais: il y a un bogue de position similaire dans les navigateurs Safari.

Le problème est que vous ne pouvez pas positionner les éléments fixes qui sont directement les enfants de la balise body.

La solution est: envelopper le contenu dans un autre div. Et mettre tout à l'intérieur.

Vous pouvez peut-être essayer de placer votre élément Header et footer dans un div supplémentaire pour que le pied de page ne soit pas un enfant direct de la balise body.

mettez ce css dans votre style.css

body {
    margin: 0px;
}
h3 {
  color: white;
  padding:0px 50px;
}
my-app{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

app-header,app-home,app-footer{
  position: absolute;
  left: 0;
  width: 100%;
}
app-header,app-footer{
  text-align: center;
  color: white;
  height: 50px;
   background-color:#47454b;
}
app-header{
  top:0;
}
app-footer{
  bottom:0;
}
app-home {
  top: 50px;
  bottom: 50px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

supprimez tous les css de header.component.css et footer.component.css code >

voici le lien stackblitz https://stackblitz.com/edit/angular-load-ionic-iframe-knkgq4?file=src%2Fstyles.css

Pas essayé, mais ça vaut le coup d'essayer:

style.css

position: relative;

}

home.component.html

XXX

footer.component.css

.footer{
    position: fixed;
    bottom: 0;
    width: 100%;
  background-color:#47454b;
  z-index:99;
}
h3 {
  color: white;
  padding:0px 50px;
}

J'ai eu des problèmes similaires dans IE avec un pied de page et un en-tête collants, cela fait l'affaire pour moi. Vous avez dit que vous utilisiez des iframes, mais que vous ne pouviez pas en trouver dans votre fork, uniquement du contenu enveloppé de div ... si vous incluez l'iframe, vous pouvez essayer d'appliquer un positionnement relatif pour l'iframe comme

<div style="display: block;">
    <div class="container" *ngFor="let country of countries">
        <div class="code"><strong>Code:</strong> {{country.countryCode}}</div>
        <div class="name"><strong>Name:</strong> {{country.countryName}}</div>
    </div>
</div>

pour éviter une collision avec l'en-tête et le pied de page. J'espère que cela vous aidera.