From a39a651b51d6231ab236d9dbfd3a15cad9dba2d1 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Tue, 13 Jul 2021 16:34:57 +0200
Subject: [PATCH] fix(material/radio): hidden circle visible on some zoom
 levels

We transition the circle of a radio button to `scale(0.001)` in order to hide it and to work
around an animation in IE. It seems that on higher system zoom levels (e.g. 125%+) the
browser approximates the size to 1x1 which can be visible.

These changes work around the issue by also setting `opacity: 0` while the circle is inactive
and isn't animating.

Fixes #22036.
---
 src/material/radio/radio.scss | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/material/radio/radio.scss b/src/material/radio/radio.scss
index 721979250dfd..20485109262c 100644
--- a/src/material/radio/radio.scss
+++ b/src/material/radio/radio.scss
@@ -67,6 +67,8 @@ $ripple-radius: 20px;
 
 // The inner circle for the radio, shown when checked.
 .mat-radio-inner-circle {
+  $transition-duration: 280ms;
+  $base-transition: transform ease $transition-duration, background-color ease $transition-duration;
   border-radius: 50%;
   box-sizing: border-box;
   display: block;
@@ -74,7 +76,11 @@ $ripple-radius: 20px;
   left: 0;
   position: absolute;
   top: 0;
-  transition: transform ease 280ms, background-color ease 280ms;
+  // On some zoom levels the `scale(0.001)` from below can cause the circle to be shown as a 1x1
+  // dot (see #22036). Ensure that it's hidden using `opacity`. There's a slight transition with
+  // a long delay so that switching the opacity only applies after the `transform` is done.
+  opacity: 0;
+  transition: $base-transition, opacity linear 1ms $transition-duration;
   width: $size;
 
   // Note: This starts from 0.001 instead of 0, because transitioning from 0 to 0.5 causes
@@ -84,12 +90,10 @@ $ripple-radius: 20px;
   // force browser to show background-color when using the print function
   @include vendor-prefixes.private-color-adjust(exact);
 
-  ._mat-animation-noopable & {
-    transition: none;
-  }
-
   .mat-radio-checked & {
     transform: scale(0.5);
+    opacity: 1;
+    transition: $base-transition;
 
     @include a11y.high-contrast(active, off) {
       // Since we use a background color to render the circle, it won't be
@@ -97,6 +101,10 @@ $ripple-radius: 20px;
       border: solid private.private-div($size, 2);
     }
   }
+
+  ._mat-animation-noopable & {
+    transition: none;
+  }
 }
 
 // Text label next to radio.