I recently developed a website using Angular and Angular Material. While the site functions properly on Windows and Android across all browsers, I encountered an issue with iOS devices running Safari. Some elements on the page do not display correctly on iOS (although clicking on the page allows users to interact with input fields and log in successfully):
- on Android:
https://i.stack.imgur.com/dXzCO.png
- on iOS:
https://i.stack.imgur.com/dFDG9.png
The following is the HTML code snippet for the affected page:
<div class="component-login">
<div class="content">
<div class="row">
<div class="col-lg-12">
<form name="loginForm" #f="ngForm" (ngSubmit)="logIn(f)">
<div class="row pl-4">
<mat-form-field appearance="fill" class="full-width">
<mat-label>Username</mat-label>
<input matInput required name="username" ngModel #username="ngModel"/>
</mat-form-field>
</div>
<div class="row pl-4">
<mat-form-field appearance="fill" class="full-width">
<mat-label>Password</mat-label>
<input matInput required [type]="hide ? 'password' : 'text'" name="password" ngModel #password="ngModel"/>
<mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
<mat-error *ngIf="password.dirty">
Error
</mat-error>
</mat-form-field>
</div>
<div class="row">
<div class="center">
<button mat-flat-button class="btn-save btn" [disabled]="!f.valid">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Additional CSS styles used:
.component-login{
height: 100%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
.content{
width: 400px;
height: 400px;
background: #e10600;
margin: 0 auto;
border-radius: 20px;
position: fixed;
top: 30%;
@media screen and (max-width: 600px) {
width: 90%;
}
img{
margin: 60px 50px;
@media screen and (max-width: 600px){
margin: 60px 10px;
}
}
.row{
font-family: 'Titillium Web', sans-serif;
color: #fff;
.col-lg-12{
padding: 0 50px;
::ng-deep .mat-form-field-flex{
border-right: 5px;
background-color: #fff;
}
}
.center{
display: flex;
justify-content: center;
}
a{
color: #fff;
text-decoration: none;
font-family: 'Titillium Web', sans-serif;
img{
width: 4%;
margin: 0 10px 0 0;
}
}
.mat-button-disabled{
background-color: #fff;
}
.btn-save{
background-color: #fff;
color: #000;
}
}
}
}