-
Notifications
You must be signed in to change notification settings - Fork 6.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
mat form field underline not animating correctly #17998
Comments
Hi @trympet , But, i did reproduce using your sample on StackBlitz with Chrome.
Or a var of PS: in the meantime, it seems like this rule is making the hover acting more smoothly on Chrome. |
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. |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Reproduction
StackBlitz link: https://stackblitz.com/edit/components-issue-une28f
Steps to reproduce:
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
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
The text was updated successfully, but these errors were encountered: