chore(form-field): prevent overzealous floating placeholder rule optimization

[jelbourn]

This creates a total duplicate of the floating-placeholder style mixin with insignificant values added to the rules. This exists because the mixin is used in two places; when Google's CSS Optimizer runs over this css (after compiling from sass), it combines those two declarations into one. However, one of those places uses :-webkit-autofill. When Firefox encounters this unknown pseuedo-class, it ignores the entire rule. To work around this, we force one of the delcarations to be technically different but still render the same by adding a tiny value to the transform / width.

[jelbourn]

Output looks like this now:

.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-placeholder {
  transform: translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);
  -ms-transform: translateY(-1.28125em) scale(.75);
  width: 133.33333%
}

.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-placeholder {
  transform: translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.002px);
  -ms-transform: translateY(-1.28125em) scale(.75);
  width: 133.33343%
}

[mmalerba]

Can we file a bug against the CSS optimizer and put a TODO to remove this hack?

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