From c14cf7caae5e982d9f713dcaad42a694ac105e37 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Mon, 19 Mar 2018 21:19:13 +0100
Subject: [PATCH] fix(badge): invalid style declaration and too broad
 transition (#10433)

* Fixes the badge transition not working due to the `transition` declaration being invalid (no units on the duration).
* Fixes the badge animating all properties rather than only the `transform`.
* Avoids blurry text in IE.
---
 src/lib/badge/_badge-theme.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/lib/badge/_badge-theme.scss b/src/lib/badge/_badge-theme.scss
index 98158972550..7e3787b6805 100644
--- a/src/lib/badge/_badge-theme.scss
+++ b/src/lib/badge/_badge-theme.scss
@@ -131,7 +131,7 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
     text-align: center;
     display: inline-block;
     border-radius: 50%;
-    transition: all 0.2 ease-in-out;
+    transition: transform 200ms ease-in-out;
     transform: scale(0.6);
     overflow: hidden;
     white-space: nowrap;
@@ -142,7 +142,8 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
   // The active class is added after the element is added
   // so it can animate scale to default
   .mat-badge-content.mat-badge-active {
-    transform: scale(1);
+    // Scale to `none` instead of `1` to avoid blurry text in some browsers.
+    transform: none;
   }
 
   .mat-badge-small {