From f9032045e1ba054ffa063ce34ddbb2861b0e7ebb Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 1 Mar 2021 17:15:29 +0100 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 | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/material/radio/radio.scss b/src/material/radio/radio.scss index 1b816c850763..aef113708ab9 100644 --- a/src/material/radio/radio.scss +++ b/src/material/radio/radio.scss @@ -66,6 +66,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; @@ -73,7 +75,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 @@ -86,6 +92,8 @@ $ripple-radius: 20px; .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