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.

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

Ionic iframe loading, If you're behind a web filter, please make sure that the domains *. position: fixed is not working in iOS when loading Angular site inside iframe in Ionic 3 Brief� 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.

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 { }

Issues with position fixed & scrolling on iOS, The page used was: jsbin.com/3/ixewok/6/ (edit) This is a problem if you want to monitor the page position to simulate effects like cause the scroll) the elements inside the fix element are unavailable. So when the user tries to click the "load more" button there's another hot spot being triggered instead! The trick would seem to be: make sure your fixed position element is not on a “moving canvas”. This example has the fixed element over a scrolling element, but not inside of it.

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.

iframe content scroll issue � Issue #1151 � ionic-team/ionic , iframe content doesn't scroll properly when touch is initiated, eg, an Ionic issue, and may be that iframes need special handling in iOS (disqus) and will not be able to resize once the content is loaded. bug: Can't start scrolling when click inside iframe #3290 I'm tested setting fix URL and not work. @dfiggtns Easy fix that worked for me - update ionic-angular to latest nightly containing the discussed fix: Simply run npm i ionic-angular@3.9.4-201903121725 in your project's directory :) 👍 14 😄 1 🎉 6 ️ 4 🚀 1

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.

Safari for iOS: z-index order bug scrolling a page with a , 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. Hi All, I have recently setup a new mac and have started developing my app for ios. Its a new mac and i have installed below applications and started the dev. Everything seems to work except for the fact that i have an iframe on my index.html page and it does not seem to load any content. I am not sure if this is related to cross site scripting issue. But the same app is working fine when i

I ran into an iOS bug a couple of days ago. static position, and a little menu button on the top right corner of the page set with a fixed position. Fixed Content. In order to place elements outside of the scrollable area, slot="fixed" can be added to the element. This will absolutely position the element placing it in the top left. In order to place the element in a different position, style it using top, right, bottom, and left.

Why your Angular App is not Working: 11 common Mistakes. Resolving problems of your angular application can be very challenging. When your angular app is not working and all it gives you are some cryptic red lines in a console. Especially when you are a beginner, these problems can turn the development process with angular into a real pain.

Fixed positioned elements (typically headers or footers) are extremely common conventions for native mobile platforms, so naturally fixed elements found their way into mobile browsers. Web designers are used to fixing elements to the window using CSS's position: fixed, however, in the land of mobil

Comments
  • Thanks for your answer. I will give a try.
  • @Imon Thanks a ton. your answer is working like a charm. you save my life.
  • Thanks for your answer. I tried your solutions. But it did not fix my issue. I cannot imagine that this issue occurred as I am loading Angular site inside iframe. But when I debug my iOS app in safari it shows that all the required styles are applied. Any way thanks for your effort.
  • No problem, worth a try, this is a fairly unusual setup so I think you will have trouble getting help on this issue.
  • Yes this is actually unusual. I am already spent one day on this. but could not find a solution yet. Any way thanks for your answer.
  • Thanks for your reply. But, It is not the case. problem is with iframe. without iframe all the styles are applied in iPhone as I needed