Mat Input placeholder text is blurry

Question

The matInput placeholder text is blurry on Chrome/Safari (I think everything).

Code:

<div class="form-group">
     <mat-form-field>
        <input matInput placeholder="Email" ngModel name="email" id="email" type="email" required>
    </mat-form-field>
</div>
<div class="form-group">
   <mat-form-field>
        <input matInput placeholder="Password" ngModel name="password" id="password" type="password" required>
   </mat-form-field>
</div>

Screenshot:

Answer 1

This issue was caused by centering the element with transform/translate 50%.

Using flex box and aligning the item center fixed the issue!

Just a heads up!