fix(material/radio): hidden circle visible on some zoom levels (#23154)

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.

(cherry picked from commit 21bb4d5)

src/material/radio/radio.scss

@@ -90,10 +90,6 @@ $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;
@@ -105,6 +101,10 @@ $ripple-radius: 20px;
       border: solid private.private-div($size, 2);
     }
   }
+
+  ._mat-animation-noopable & {
+    transition: none;
+  }
 }
 
 // Text label next to radio.