Input-text jumps in IE11 when setting line-height inside mat-form-field

Question

The line-height of mat-form-field is initially set to 1.125. When overwriting it with a higher value (e.g. 1.5) it leads to jumping effects in the nested input-element inside the mat-form-field. On focus/blur the text jumps up and down.

To see the issue, open this stackblitz in Internet Explorer, type something into the input field and focus/blur the field multiple times. The inputted text will jump up and down. When you remove the line-height property, it does not jump. https://stackblitz.com/edit/angular-z1efak

I already posted this as an issue in angular/material project (https://github.com/angular/material2/issues/12769)

Does someone have an idea how to deal with that issue and why this is happening? In Chrome everything works perfectly.

Answer 1

This is happening because you are overriding the default line-height, and for field performs a lot of calculations based on line-height to determine sizes of other aspects of for field. And since IE11's and Chrome's input elements are not identical, the results of these kinds of changes are unpredictable and most likely never tested.

A quick fix (hack your hack) is the set the original line-height back on the input element:

.mat-form-field {
  line-height: 1.5;
}

.mat-input-element {
  line-height: 1.125;
}