Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Jul 12, 2021
Merged

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion src/material/radio/radio.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,14 +66,20 @@ $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;
height: $size;
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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe JAWS + IE11 treats opacity: 0 as hidden, unfortunately.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is just a blank span, the input is a sibling element.

transition: $base-transition, opacity linear 1ms $transition-duration;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why does it have a duration and a delay, isn't just a delay good enough?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If it just left it in as opacity linear $transition-duration it won't delay at all and I think that some browsers won't animate it if it's 0ms.

width: $size;

// Note: This starts from 0.001 instead of 0, because transitioning from 0 to 0.5 causes
Expand All @@ -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
Expand Down