Skip to content

Commit 1434c24

Browse files
authored
Revert "fix(material/radio): hidden circle visible on some zoom levels (#23154)"
This reverts commit 21bb4d5.
1 parent 21bb4d5 commit 1434c24

File tree

1 file changed

+5
-13
lines changed

1 file changed

+5
-13
lines changed

src/material/radio/radio.scss

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -67,20 +67,14 @@ $ripple-radius: 20px;
6767

6868
// The inner circle for the radio, shown when checked.
6969
.mat-radio-inner-circle {
70-
$transition-duration: 280ms;
71-
$base-transition: transform ease $transition-duration, background-color ease $transition-duration;
7270
border-radius: 50%;
7371
box-sizing: border-box;
7472
display: block;
7573
height: $size;
7674
left: 0;
7775
position: absolute;
7876
top: 0;
79-
// On some zoom levels the `scale(0.001)` from below can cause the circle to be shown as a 1x1
80-
// dot (see #22036). Ensure that it's hidden using `opacity`. There's a slight transition with
81-
// a long delay so that switching the opacity only applies after the `transform` is done.
82-
opacity: 0;
83-
transition: $base-transition, opacity linear 1ms $transition-duration;
77+
transition: transform ease 280ms, background-color ease 280ms;
8478
width: $size;
8579

8680
// Note: This starts from 0.001 instead of 0, because transitioning from 0 to 0.5 causes
@@ -90,21 +84,19 @@ $ripple-radius: 20px;
9084
// force browser to show background-color when using the print function
9185
@include vendor-prefixes.private-color-adjust(exact);
9286

87+
._mat-animation-noopable & {
88+
transition: none;
89+
}
90+
9391
.mat-radio-checked & {
9492
transform: scale(0.5);
95-
opacity: 1;
96-
transition: $base-transition;
9793

9894
@include a11y.high-contrast(active, off) {
9995
// Since we use a background color to render the circle, it won't be
10096
// displayed in high contrast mode. Use a border as a fallback.
10197
border: solid private.private-div($size, 2);
10298
}
10399
}
104-
105-
._mat-animation-noopable & {
106-
transition: none;
107-
}
108100
}
109101

110102
// Text label next to radio.

0 commit comments

Comments
 (0)