skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jeremy Elbourn
2017-11-10 09:53:37 -08:00
committed by Joey Perrott
parent a01972960f
commit 691bb7321a
1 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/form-field/_form-field-theme.scss
+14 -1
View File
@@ -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);
}
}