Angular Material matInput text is partially hidden while typing

Question

I am using Angular 5 with the Material design. I found very weird display issue with matInput where the text (like g) is partially hidden in edit mode. Interestingly this behavior is present in Angular Material sample as well See here: Angular Material Stackblitz example

Any help to fix this issue?

Issue found on MacOS (Macbook Pro) and is reproducible on both chrome and safari.

Answer 1

Try to add the line height to the element. Use ::ng-deep if you add styles to pseudo classes.

  .mat-input-element {
    line-height: normal !important;
  }