Skip to content

Commit

Permalink
fix(material/form-field): flickering when hovering invalid input on c…
Browse files Browse the repository at this point in the history
…hrome (angular#21620)

Fixes some flickering in all adjacent form fields that happens when a specific form field
is in its invalid state and the user hovers over it.

Fixes angular#21612.
  • Loading branch information
crisbeto authored and wagnermaciel committed Jan 26, 2021
1 parent bc1c4ab commit bd574f0
Showing 1 changed file with 3 additions and 1 deletion.
4 changes: 3 additions & 1 deletion src/material/form-field/form-field.scss
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,9 @@ $mat-form-field-default-infix-width: 180px !default;
.mat-form-field.mat-form-field-invalid {
.mat-form-field-ripple {
opacity: 1;
transform: scaleX(1);
// Note that we transition this to `none`, rather than `scaleX(1)`, because the scaling
// seems to cause some rendering artifacts on adjacent form fields (see #21612).
transform: none;
transition: transform 300ms $swift-ease-out-timing-function,
opacity 100ms $swift-ease-out-timing-function,
background-color 300ms $swift-ease-out-timing-function;
Expand Down

0 comments on commit bd574f0

Please sign in to comment.