قالب وردپرس درنا توس
Home / IOS Development / css – position: Fixed not working in IOS when you enter Angular site within iframe in Ionic 3

css – position: Fixed not working in IOS when you enter Angular site within iframe in Ionic 3



Brief description of what we are trying to achieve

We are developing a Angular application. We developed it for both web and mobile with the same code base. The mobile version includes many features like Push Notifications SMS Subscriptions etc. We hope to publish mobile version to the App Store and Play store. We use simple iconic 3 app to build it for Android and iOS.

The Ionic 3 program contains only one page where we load our Angular Website into a iframe .

HTML of ionic side


  

TS of ionic side

  export class HomePage {
iframeSrc: some;

sanitizer: DomSanitizer;
url: string = & https: //angular-load-ionic-iframe.stackblitz.io&#39 ;;

designer (sanitizer: DomSanitizer) {
this.sanitizer = sanitizer;
this.iframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl (this.url);

}
}

Finn Github Repository of Ionic 3 app Here.

I've created StackBlitz Angular projects similar to the My Angular application. Find it here.

My problem

In my app, app-header and app-footer you need to fix
ViewPort and other content should be able to scroll. I succeed
achieved this for Android But in iOS, app-header and app-footer
is not resolved to ViewPort and they scroll with other content
when I load my border profile into a iframe in iconic app.

header.component.html

  

Country

header.component.css

  .main {
background color: # 46454A;
color: rgba (255,255,255, .6);
upholstery: 5px 50px;
}

Heading{
position: fixed;
z index: 1
0; peak: 0; width: 100%; }

footer.component.html

  

This is footer

footer.component.css

  .footer {
position: fixed;
bottom: 0;
width: 100%;
background color: # 47454b;
}
h3 {
color: white;
upholstery: 0px 50px;
}
[19659000] I couldn't figure out  Is there  CSS  problem with iOS  or  Has happened when I load angle site inside  iframe . Struggling for a day, but still no success. If anyone can help me solve this problem highly appreciated, and if anyone needs more information about this, please comment. 


Source link