View of Safari Macbook and Safari IphoneXI am working with angular 8 and angular material. I designed the login page that is fully functional. The problem that i am facing is that on IOS devices i.e iphone and ipads either it is safari or chrome the footer overlappes the login form. On the other hand on my macbook its working good on google chrome but same footer problem on safari. Can anybody help me in this regard
I tried @media query and google simultator is showing the perfect response but on the actual device its not that as google device simulator is showing
<div class="login-page-background">
<div class="bg-image" fxLayout="column" >
<video id="bgVideo" [autoplay]="true" [muted]="true" [loop]="true">
<source src="/assets/login.webm" type="video/webm">
</video>
<div class="login-page-header" fxLayoutAlign="center center">
<a href="../login">
<img style="height: 70px; margin-top: 20px" src="../assets/logoedited.png">
</a>
</div>
<div fxFlex fxLayout="column" style="margin-top: 20px">
<div>
<form [formGroup]="loginForm" (ngSubmit)="login()" fxLayoutAlign="space-evenly center" >
<mat-card style="padding:35px; box-shadow:1px 1px 2px 1px rgba(45, 45, 45);; background: bottom ">
<mat-card-title>
<p style="font-size: medium; color: black"> Anmelden mit Ihrer Fioretto Systems ID </p>
</mat-card-title>
<mat-card-content fxLayout="column">
<div *ngIf="loginError" style="color: red">
Ungültiger Benutzername und oder Passwort
</div>
<mat-form-field>
<input type="email" matInput placeholder="E-Mail*" formControlName="username" >
<div *ngIf="loginForm.controls.username.touched && loginForm.controls.username.errors">
<mat-error *ngIf="loginForm.controls.username.errors.email">
Geben Sie eine gültige E-Mail ein
</mat-error>
<mat-error *ngIf="loginForm.controls.username.errors.required">
E-Mail ist <strong>erforderlich</strong>
</mat-error>
</div>
</mat-form-field>
<br>
<mat-form-field>
<input matInput type="password" formControlName="password" placeholder="Passwort*" [type]="hide ? 'password' : 'text'">
<button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
<mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
<div *ngIf="loginForm.controls.password.touched && loginForm.controls.password.errors">
<mat-error *ngIf="loginForm.controls.password.errors.required">
Passwort ist <strong>erforderlich</strong>
</mat-error>
</div>
</mat-form-field>
<div fxLayout="row" style="margin-top:15px" fxLayout="center center">
<div fxFlex="50">
<re-captcha (resolved)="resolved($event)" siteKey="6Lf617IUAAAAAPAj1hFPJ48dHR7b_AXvJWlllYdh"></re-captcha>
<div *ngIf="captchaError" style="color: red">
<strong>reCaptcha validieren</strong>
</div>
</div>
</div>
</mat-card-content>
<mat-card-actions style="text-align:right; margin-right: 0px">
<button type="submit" style="background:#184397" mat-raised-button color="primary">Login</button>
<br>
<a href="../login/"> <p style="color: #184397">Passwort vergessen</p></a>
</mat-card-actions>
</mat-card>
</form>
</div>
<div class="login-page-header" fxLayout="column" fxLayoutAlign="center center">
<a href="https://fioretto-group.com/" target="blank">
<img src="../assets/FiorettoGroup.png" style= "width:380px;height:auto">
</a>
</div>
</div>
<div fxFlex>
<div *ngIf="loading">
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>
</div>
<div fxFlex></div>
<div class="app-footer">
<div fxLayout="row wrap" fxLayout.sm="column" fxLayout.xs="column">
<a fxFlex="33" href="https://mek-finanz.de/" target="blank" >
<img class="prtnr-cmp-img" src="../assets/logo's-04.png" >
</a>
<a fxFlex="33" href="https://fioretto-immobilien.de/" target="blank">
<img class="prtnr-cmp-img" src="../assets/logo's-02.png" >
</a>
<a fxFlex="33" href="https://birema.herokuapp.com/index.html" target="blank" >
<img class="prtnr-cmp-img" src="../assets/BIR-07.png" >
</a>
<a fxFlex="33" href="https://fioretto-media.herokuapp.com/index.html" target="blank">
<img class="prtnr-cmp-img" src="../assets/FIORETTO-MEDIA.png" >
</a>
<a fxFlex="33" href="https://airmage.herokuapp.com/index.html" target="blank">
<img class="prtnr-cmp-img" src="../assets/logo's-06.png" >
</a>
<a fxFlex="33" href="https://horai-detektei.de/" target="blank">
<img class="prtnr-cmp-img" src="../assets/logo's-03.png" >
</a>
<a fxFlex="33" href="https://vario-import.com/" target="blank">
<img class="prtnr-cmp-img" src="../assets/logo's-05.png" >
</a>
<a fxFlex="33" href="https://sterbe-vorsorge.de/" target="blank">
<img class="prtnr-cmp-img" src="../assets/logo's-09.png" >
</a>
<a fxFlex="33" href="https://animatixs.herokuapp.com/index.html" target="blank" >
<img class="prtnr-cmp-img" src="../assets/logo's-01.png">
</a>
</div>
<div fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxLayoutAlign="center center">
<p class="footer-links" style="font-size: small; margin-top: 10px"> © 2019 Fioretto GmbH & Co. KG | </p>
<a [routerLink]="['/data-policy']" [queryParams]="{ id: '0'}" target="blank">
<p class="footer-links" style="font-size: small; margin-top: 10px"> Impressum | </p>
</a>
<a [routerLink]="['/data-policy']" [queryParams]="{ id: '1'}" target="blank">
<p class="footer-links" style="font-size: small; margin-top: 10px"> Datenschutzbestimmungen | </p>
</a>
<a [routerLink]="['/data-policy']" [queryParams]="{ id: '2'}" target="blank">
<p class="footer-links" style="font-size: small; margin-top: 10px">Cookies | </p>
</a>
<a [routerLink]="['/data-policy']" [queryParams]="{ id: '3'}" target="blank">
<p class="footer-links" style="font-size: small; margin-top: 10px"> Nutzungsbedingungen</p>
</a>
</div>
</div>
</div>
</div>
CSS
.login-page-background{
/* background-image: url('src\assets\newbackground.gif'); */
width: 100%;
height: 100vh;
background-position: center;
overflow: auto;
background-size: cover;
overflow-x: hidden;
}
.login-page-header{
height: 110px;
}
.fioretto-image{
padding: 0px;
width: 100vh;
}
.prtnr-cmp-img{
filter: grayscale(100%);
width: 220px;
height:36px;
margin: 15px 0px;
}
.prtnr-cmp-img:hover {
filter: contrast(150%);
}
.footer-links{
color: black;
}
video#bgVideo {
position: fixed;
top: 0px;
left: 0px;
min-width: 100%;
min-height: 100%;
z-index: -1;
}
@media only screen and (max-width : 700px){
video {
position: fixed;
}
/* .bg-image{
background-image: url('/assets/aaaa.png');
} */
}
/* IPad Pro */
@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) {
.app-footer{
position: absolute;
bottom: 0px;
}
}
/* IPad */
@media only screen and (min-device-width :768px) and (max-device-width : 1024px) and (orientation : landscape) {
.app-footer{
position: inherit;
bottom: 0px;
}
}
.app-footer{
width: 100%;
text-align: center;
background-color:rgb(46, 48, 52);
height: auto;
opacity: 0.5;
background:rgb(195, 198, 204);
padding: 10px;
position: inherit;
bottom: 0px;
}
