положение: исправлено не работает в iOS при загрузке сайта Angular внутри iframe в Ionic 3

Question

Краткое описание того, чего мы пытаемся достичь

Мы разрабатываем приложение Angular .Мы разработали его как для Интернета, так и для мобильных устройств, используя одну и ту же кодовую базу.Мобильная версия содержит множество функций, таких как Push-уведомления , SMS-подписки и т. Д. Мы надеемся опубликовать мобильную версию в App Store и Play store.Мы используем простое приложение Ionic 3 для его сборки на Android и iOS.

Приложение Ionic 3 содержит только одну страницу, на которую мы загружаем наш угловой веб-сайт внутри iframe.

HTML-код ионной страницы

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

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

  }
}

Найти Репозиторий Github приложения Ionic 3 Здесь .

Я создал StackBlitz Угловой проект, который похожМоему угловому заявлению.Найдите его Здесь .

Мой выпуск

В моем приложении app-header и app-footer должны бытьисправлена ​​на ViewPort и другой контент должен иметь возможность прокрутки.Я успешно достиг этого для Android Но в iOS app-header и app-footer не привязаны к ViewPort, и они прокручиваются вместе с другим контентом, когда я загружаю свое приложение Angular внутри iframe в приложении Ionic.

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.Бороться за один день, но все равно безуспешно.Если кто-то может помочь мне решить эту проблему, мы очень признательны, и если кому-то нужна более подробная информация об этом, не стесняйтесь комментировать.

Answer 1

Не пробовал, но стоит попробовать:

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

У меня были похожие проблемы в IE с липким нижним колонтитулом и заголовком, для меня это помогает.Вы сказали, что используете iframe, но не можете найти некоторые из них в своем форке, только содержимое в формате div ... Если вы включите iframe, вы можете попробовать применить относительное позиционирование для iframe, например

position: relative;

, чтобы избежать столкновения с верхним и нижним колонтитулом.Надеюсь, это поможет.

Answer 2

Я не знаком с ionic и вашими угловыми настройками, но: в браузерах Safari есть схожая ошибка положения.

Проблема в том, что вы не можете позиционировать фиксированные элементы, которые являются прямыми дочерними элементами тега body.

Решение состоит в том, чтобы заключить содержимое в другой элемент div.И помещая все в него.

Может быть, вы можете попытаться поместить свой элемент Header и footer в дополнительный div, чтобы нижний колонтитул не был прямым потомком тега body.

Answer 3

поместите этот 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;
}

удалите все CSS из header.component.css и footer.component.css

здесь есть ссылка на стек https://stackblitz.com/edit/angular-load-ionic-iframe-knkgq4?file=src%2Fstyles.css

Answer 4

Вы пытались просто установить весь режим приложения / стиль платформы на md через конфигурацию приложения?Если вам удастся решить эту проблему на Android, то, возможно, принятие глобальных стилей Android для версии iOS решит ее и для этой платформы?

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