fix(form-field): jumping underline in Edge and Firefox

[devversion]

• In Edge and Firefox the underline jumps due to the transform: perspective. Also due to the transform the underline is getting slightly taller which isn't aligning with the specs.
• Improves rendering of the ripple underline by always setting the 2px height. Since the element only shows in focus-stated the height can be always 2px.

Note: The perspective(1px) might have fixed the zoom-out issue on some browsers, but it
introduces more issues than it helps (e.g. Firefox 57, Edge). Also the fix is not actually right. It just adds some subpixels to the 1px underline and therefore makes it easier for the browser to render in some circumstances the zoomed-out element (conflicts with the Material Design specification of 1px).

Fixes #8395

[mmalerba]

There might be no way to fix it and still make other browsers happy, but here's some examples from Chrome of why I added this in the first place:

Input demo page at 90%:

Input demo page at 90% with perspective transform:

Input demo page 110%:

Input demo page 110% with perspective transform:

[devversion]

Are those screenshots from the current Chrome version? For me everything looks fine from 33%. As said this seems to depend on the screen resolution and Chrome's pixel rendering.

[mmalerba]

Linux, Chrome 62.0.3202.94, 2560x1600

[devversion]

Hmm. Not sure about that. I don't think there is a reasonable fix for such zooming levels. What do you think? @mmalerba

[mmalerba]

LGTM, standard zoom level working on all browsers should take precedence.

[palpatine1991]

Why not to create a chrome specific SCSS rule using media query?

[palpatine1991]

We are facing an issue with the chrome even with zoom set at 100% but some Windows system are apparently set to zoom "125%" by default and also chrome is affected by this.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}