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

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.

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