From 691bb7321a6ed7d324fd82d944b6bca5335fbc21 Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Fri, 10 Nov 2017 09:53:37 -0800 Subject: [PATCH] chore(form-field): prevent overzealous floating placeholder rule optimization (#8343) --- src/lib/form-field/_form-field-theme.scss | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/lib/form-field/_form-field-theme.scss b/src/lib/form-field/_form-field-theme.scss index ea8163ab965..3277aac5bb8 100644 --- a/src/lib/form-field/_form-field-theme.scss +++ b/src/lib/form-field/_form-field-theme.scss @@ -105,6 +105,19 @@ width: 100% / $font-scale; } +// This is a total duplicate of the mixin above 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. +@mixin _mat-form-field-placeholder-float-nodedupe($font-scale, $infix-padding, $infix-margin-top) { + transform: translateY(-$infix-margin-top - $infix-padding) scale($font-scale) perspective(100px) + translateZ(0.002px); + -ms-transform: translateY(-$infix-margin-top - $infix-padding) scale($font-scale); + width: (100% / $font-scale) + 0.0001; +} + @mixin mat-form-field-typography($config) { // The unit-less line-height from the font config. $line-height: mat-line-height($config, input); @@ -182,7 +195,7 @@ .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-placeholder { - @include _mat-form-field-placeholder-floating( + @include _mat-form-field-placeholder-float-nodedupe( $subscript-font-scale, $infix-padding, $infix-margin-top); } }