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.

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 #23154

Merged

Conversation

crisbeto
Copy link
Member

This is a resubmit of #22066 which was merged in by accident.

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.

@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: patch This PR is targeted for the next patch release labels Jul 12, 2021
@crisbeto crisbeto requested a review from wagnermaciel July 12, 2021 14:36
@google-cla google-cla bot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jul 12, 2021
Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

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

LGTM

@jelbourn jelbourn added the action: merge The PR is ready for merge by the caretaker label Jul 12, 2021
@wagnermaciel
Copy link
Contributor

This is causing some screenshot tests to fail

Before

Screen Shot 2021-07-13 at 6 06 29 AM

After

Screen Shot 2021-07-13 at 6 06 11 AM

@wagnermaciel
Copy link
Contributor

On further inspection, I think this is caused by the animation delay. I will see if there is a way to disable animations in their tests

@wagnermaciel
Copy link
Contributor

@crisbeto Does the radio button animation turn off with NoopAnimationsModule?

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 force-pushed the 22036/radio-transition-opacity-again-again branch from 845c8a4 to a39a651 Compare July 13, 2021 14:35
@crisbeto
Copy link
Member Author

It looks like these changes made it so that one of the transitions isn't disabled by the NoopAnimationsModule. I've pushed a fix.

@amysorto amysorto merged commit 21bb4d5 into angular:master Jul 16, 2021
amysorto pushed a commit that referenced this pull request Jul 16, 2021
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)
wagnermaciel added a commit that referenced this pull request Jul 16, 2021
@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.
Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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