position: fixed is not working in iOS when loading Angular site inside iframe in Ionic 3 - ios

Question

Brief Description on what we are trying to achieve
We are developing an Angular application. We developed it for both Web and Mobile using same code base. Mobile version contains lot of features such as Push Notifications, SMS Subscriptions etc. We are hoping to publish mobile version to App store and Play store. We are using simple Ionic 3 app to build it to Android and iOS.
Ionic 3 application contains only one page in which we are loading our Angular Web Site inside an iframe.
HTML of Ionic page
<ion-content>
<iframe class= 'webPage' [src]="iframeSrc" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>
</ion-content>
TS of Ionic page
export class HomePage {
iframeSrc: any;
sanitizer: DomSanitizer;
url: string = 'https://angular-load-ionic-iframe.stackblitz.io';
constructor( sanitizer: DomSanitizer ) {
this.sanitizer = sanitizer;
this.iframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
}
}
Find The Github Repository of Ionic 3 app Here.
I have created StackBlitz Angular project which similar to My Angular application. Find it Here.
My Issue
In my application, app-header and app-footer need to be fixed to
ViewPort and other content should be able to scroll. I successfully
achieved this for Android But in iOS, app-header and app-footer
are not fixed to ViewPort and those are scrolling with other content
when I load my Angular application inside an iframe in Ionic app.
header.component.html
<header>
<div class="main">
<h3>Countries</h3>
</div>
</header>
header.component.css
.main {
background-color: #46454A;
color: rgba(255,255,255,.6);
padding:5px 50px;
}
header{
position: fixed;
z-index: 10;
top: 0;
width: 100%;
}
footer.component.html
<footer class="footer">
<h3>This is footer</h3>
</footer>
footer.component.css
.footer{
position: fixed;
bottom: 0;
width: 100%;
background-color:#47454b;
}
h3 {
color: white;
padding:0px 50px;
}
I couldn't figure out Is it CSS issue with iOS or Is it occurred as I load angular web site inside iframe. Struggling for one day but still no success. If anyone can help me to fix this issue highly appreciated and If someone need more details about this feel free to comment.

Answer 1

put this css in your 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;
}
remove all css of header.component.css and footer.component.css
here is stackblitz link https://stackblitz.com/edit/angular-load-ionic-iframe-knkgq4?file=src%2Fstyles.css

Answer 2

Have you tried just setting the entire app mode / platform style to md via the app config? If you are able to solve this problem on Android then perhaps adopting Android styles globally for the iOS version will solve it for that platform too?
// 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 { }

Answer 3

Im not familiar with ionic and your angular setup but: there is a similar position fixed bug in safari Browsers.
The problem is: you cant position fixed Elements that are direct Children of the body tag.
The solution is: wrapping the content in another div. And putting every inside it.
Maybe you can try to put your Header and footer element inside an extra div so the footer isnt a direct child of the body tag.

Answer 4

Not tried, but worth a try:
style.css
body {
margin: 0px;
position: sticky;
z-index: -1;
width: 100%;
}
home.component.html
<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>
footer.component.css
.footer{
position: fixed;
bottom: 0;
width: 100%;
background-color:#47454b;
z-index:99;
}
h3 {
color: white;
padding:0px 50px;
}
I had similar issues in IE with sticky footer and header, this does the trick for me. You said that you are using iframes, but could not find some in your fork, only div-wrapped content... if you include the iframe, you can try to apply a relative positioning for the iframe like
position: relative;
to avoid collision with the header and footer. Hope this helps.