mat form field underline not animating correctly

[trympet]

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-une28f

Steps to reproduce:

1. Insert a form field with type="standard" or type="fill"
2. Hover over the form field with your mouse

Expected Behavior

The .mat-form-field-underline element is supposed to animate smoothly, going from semi-transparent to opaque, without instantaneous vertical jumps.

Actual Behavior

When hovering over the form element, the mat-form-field-underline element animates smoothly, but appears ~ 2 px below the original underline. Once the animation is finished, the underline jumps up to where the original underline was.

Environment

• Angular: 8.3.20
• CDK/Material: 8.2.3
• Browser(s): Google Chrome 79.0.3945.79, Edge 44.18362.449.0
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

Additional information

If I disable the CSS attribute "transform: scaleY(1.0001)" from the .mat-form-field-underline class, the underline animates correctly on Chrome. This workaround does not work on Edge.

This bug does also not appear every time you visit a page with the aforementioned form fields, but reloading the page will usually trigger the error.

Provided is a video recording documenting the bug in the provided StackBlitz environment.
https://gyazo.com/3dfaa24254ae82c3d7002e6e002f7507

[Dimitriio]

Hi @trympet ,
I didnt succeed in reproduce your issue with a project (CLI: 8.3.20, Material:8.2.3) generated with ng new <proj>, ng add @angular/material on both Google Chrome 79.0.3945.88(Beta) and Edge 44.18362.449.0.

But, i did reproduce using your sample on StackBlitz with Chrome.
It seems like the fix could be changing transform: none; into transform: inherit; (parent have transform: scaleY(1.0001))
For standard & fill :

  &:not(.mat-form-field-disabled) .mat-form-field-flex:hover ~ .mat-form-field-underline {
    .mat-form-field-ripple {
      opacity: 1;
      transform: inherit;
      transition: opacity 600ms $swift-ease-out-timing-function;
    }
  }

Or a var of scaleY(1.0001) and use it in needed places.

PS: in the meantime, it seems like this rule is making the hover acting more smoothly on Chrome.

[devversion]

I've updated the StackBlitz, but it looks like this has been resolved https://stackblitz.com/edit/components-issue-une28f?file=app%2Fapp.module.ts. I was able to see some weird jump in the original StackBlitz you provided.

Can you please double-check if this is still an issue for you? We have an experimental form-field in the works that is based on MDC anyway. That might fix it too, if still an issue for you.

[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.}