Angular Material在iOS Safari中显示异常问题求助

我使用Angular及Angular Material开发了一个网站，该网站在Windows、Android的所有浏览器中均可正常运行，但在iOS的Safari浏览器中部分元素无法显示（不过点击页面后输入字段可正常工作，能完成登录）：

• Android端显示效果：
  
• iOS端显示效果：
  

页面HTML代码 #

<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">
                Errore
              </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>

CSS代码 #

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

解决方案 #

1. 修复Flex布局兼容性 #

iOS Safari对height:100%的继承支持存在问题，替换为视口高度并添加iOS适配：

.component-login{
  height: 100vh;
  min-height: -webkit-fill-available; // 适配iOS状态栏高度
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  // 保留其他原有样式
}

2. 移除定位冲突 #

.content同时使用fixed定位和flex居中会导致Safari渲染异常，调整定位逻辑：

.content{
  width: 400px;
  height: 400px;
  background: #e10600;
  margin: 0 auto;
  border-radius: 20px;
  position: relative; // 替换fixed定位
  top: auto; // 移除top:30%，依赖父级flex居中
  // 保留其他原有样式
}

3. 强制触发Safari重绘 #

添加样式触发浏览器重绘，解决缓存导致的元素不显示问题：

// 在CSS末尾添加
.force-redraw {
  transform: translateZ(0);
}

在组件中触发重绘：

ngAfterViewInit(): void {
  setTimeout(() => {
    document.querySelector('.component-login')?.classList.add('force-redraw');
  }, 100);
}

4. 给表单字段添加显式高度 #

避免Safari无法识别表单元素高度：

::ng-deep .mat-form-field-flex{
  border-right: 5px;
  background-color: #fff;
  min-height: 56px; // 添加显式最小高度
}

内容的提问来源于stack exchange，提问作者Gabbodrummer