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

Jump to bottom

bug(checkbox): A small dot in the middle of an inactive radio button #22036

Closed
adrianzgrzebski opened this issue Feb 26, 2021 · 4 comments · Fixed by #22066 or #23154
Closed

bug(checkbox): A small dot in the middle of an inactive radio button #22036

adrianzgrzebski opened this issue Feb 26, 2021 · 4 comments · Fixed by #22066 or #23154
Assignees
@crisbeto
Labels
area: material/radio P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@adrianzgrzebski
Copy link

Reproduction

Steps to reproduce:

  1. https://material.angular.io/components/checkbox/examples

Expected Behavior

The unselected radio button should be without a small dot in the center.

Actual Behavior

radio button

Environment

  • Browser: Firefox 86.0 (64 bit)
  • Operating System: Windows 10
@adrianzgrzebski adrianzgrzebski added the needs triage This issue needs to be triaged by the team label Feb 26, 2021
@crisbeto
Copy link
Member

I wasn't able to reproduce it on Firefox 86 and Windows 10. What is your system-level zoom?

@adrianzgrzebski
Copy link
Author

125% (recommended)
When I set it to 100% the problem disappeared

@crisbeto crisbeto self-assigned this Mar 1, 2021
@crisbeto crisbeto added area: material/radio has pr P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed needs triage This issue needs to be triaged by the team labels Mar 1, 2021
@crisbeto
Copy link
Member

crisbeto commented Mar 1, 2021

Thanks, I'm able to reproduce it now.

crisbeto added a commit to crisbeto/material2 that referenced this issue Mar 1, 2021
@crisbeto
fix(material/radio): hidden circle visible on some zoom levels
f903204 
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 angular#22036.
@crisbeto crisbeto mentioned this issue Mar 1, 2021
Merged
wagnermaciel pushed a commit that referenced this issue Jul 12, 2021
@crisbeto
fix(material/radio): hidden circle visible on some zoom levels (#22066)
ae968ab 
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.
wagnermaciel pushed a commit that referenced this issue Jul 12, 2021
@crisbeto @wagnermaciel
fix(material/radio): hidden circle visible on some zoom levels (#22066)
2812677 
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 ae968ab)
crisbeto added a commit to crisbeto/material2 that referenced this issue Jul 12, 2021
@crisbeto
fix(material/radio): hidden circle visible on some zoom levels
dce9afa 
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 angular#22036.
crisbeto added a commit to crisbeto/material2 that referenced this issue Jul 12, 2021
@crisbeto
fix(material/radio): hidden circle visible on some zoom levels
845c8a4 
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 angular#22036.
@crisbeto crisbeto mentioned this issue Jul 12, 2021
Merged
@crisbeto crisbeto reopened this Jul 12, 2021
crisbeto added a commit to crisbeto/material2 that referenced this issue Jul 13, 2021
@crisbeto
fix(material/radio): hidden circle visible on some zoom levels
a39a651 
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 angular#22036.
amysorto pushed a commit that referenced this issue Jul 16, 2021
@crisbeto
fix(material/radio): hidden circle visible on some zoom levels (#23154)
21bb4d5 
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.
amysorto pushed a commit that referenced this issue Jul 16, 2021
@crisbeto @amysorto
fix(material/radio): hidden circle visible on some zoom levels (#23154)
c26264f 
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)
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Aug 16, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
area: material/radio P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
2 participants
@crisbeto @adrianzgrzebski