From 0f7d50324fcf7df7ef34d3d1e3666f15fd40f018 Mon Sep 17 00:00:00 2001
From: mmalerba <mmalerba@google.com>
Date: Tue, 1 May 2018 14:38:32 -0700
Subject: [PATCH] fix(form-field): inconsistent underline height at different
 DPIs (#11062)

---
 src/lib/core/style/_form-common.scss | 2 +-
 src/lib/form-field/form-field.scss   | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/lib/core/style/_form-common.scss b/src/lib/core/style/_form-common.scss
index a7c0e8db46e..215a9313fc2 100644
--- a/src/lib/core/style/_form-common.scss
+++ b/src/lib/core/style/_form-common.scss
@@ -5,7 +5,7 @@
 // to match the Material Design spec.
 @mixin mat-control-disabled-underline($color) {
   background-image: linear-gradient(to right, $color 0%, $color 33%, transparent 0%);
-  background-size: 4px 1px;
+  background-size: 4px 100%;
   background-repeat: repeat-x;
 }
 
diff --git a/src/lib/form-field/form-field.scss b/src/lib/form-field/form-field.scss
index 7375167e45f..8739aa5e81e 100644
--- a/src/lib/form-field/form-field.scss
+++ b/src/lib/form-field/form-field.scss
@@ -144,6 +144,13 @@ $mat-form-field-default-infix-width: 180px !default;
   width: 100%;
   // Need this so that the underline doesn't block the hover effect.
   pointer-events: none;
+  // We transform the height slightly higher to fix inconsistent underline height for some DPIs.
+  // Without this we observed that at zoom levels between 50% and 100% some form-field underlines
+  // would disappear. The issue appears to be related to fractional pixels since (e.g. underlines
+  // with their top at x.6 would disappear, but ones with there top at x.7 were fine). The exact
+  // fractions that caused problems seemed to depend on the screen resolution and zoom level. We
+  // experimentally discovered that adding a very slight scale factor fixes the issue.
+  transform: scaleY(1.0001);
 }
 
 .mat-form-field-ripple {