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

Question

简要说明我们正在努力实现的目标

我们正在开发一个Angular 应用程序。我们使用相同的代码库为 Web 和移动开发它。手机版包含很多功能，例如推送通知、短信订阅等。我们希望将手机版发布到App store和Play store。我们使用简单的 Ionic 3 应用程序将其构建到 Android 和 iOS。

Ionic 3 应用程序仅包含一个页面，我们在其中加载 iframe 中的 Angular 网站。

Ionic 页面的 HTML

<ion-content>
  <iframe class= 'webPage' [src]="iframeSrc" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
  </iframe>
</ion-content>

Ionic页面的TS

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);

  }
}

查找The Github Repository Ionic 3 应用程序 Here .

我创建了 StackBlitz类似于 My Angular 应用程序的 Angular 元素。找到它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;
}

我无法弄清楚是 CSS iOS 问题还是它是在我在 iframe 中加载 Angular 网站时发生的>。挣扎了一天，还是没有成功。如果有人可以帮助我解决此问题，我将不胜感激，如果有人需要有关此问题的更多详细信息，请随时发表评论。

Answer 1

将此 css 放入您的 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;
}

删除所有 header.component.css 和 footer.component.css

这是 stackblitz 链接 https://stackblitz.com/edit/angular-load-ionic-iframe-knkgq4?file=src%2Fstyles.css