Угловой материал 2 - поле ввода не отображается должным образом, как ожидалось

Я использую Angular material 2 для приложения angular 4 вместе с угловым гибким макетом. Ниже представлена ​​простая форма

<div fxLayoutGap="5px" fxLayout="column">
      <mat-form-field class="full-width">
        <input matInput placeholder="Email Id" type="text" [(ngModel)]="emailId">
      </mat-form-field>

      <mat-form-field class="full-width">
        <input matInput placeholder="Password" type="password" [(ngModel)]="password">
      </mat-form-field>

      <mat-form-field class="full-width">
        <input matInput placeholder="Confirm Password" type="password">
      </mat-form-field>
...
</div>

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

Это происходит, когда вы уменьшаете/увеличиваете размер вашего браузера.

Этого не происходит, потому что тип ввода - пароль