fix(material/radio): hidden circle visible on some zoom levels #22066
Conversation
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
P3
google-cla
bot
added
the
cla: yes
| // 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; |
There was a problem hiding this comment.
why does it have a duration and a delay, isn't just a delay good enough?
There was a problem hiding this comment.
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.
| // 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; |
There was a problem hiding this comment.
I believe JAWS + IE11 treats opacity: 0 as hidden, unfortunately.
There was a problem hiding this comment.
This is just a blank span, the input is a sibling element.
|
@crisbeto This breaks a handful of screenshot tests internally. I don't know if you'd be able to debug this with just these screenshots, so if not we'll need to have the next caretaker take a closer look Before: After: |
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)
angular#22066)" (angular#23152) This reverts commit ae968ab.
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
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: 0while the circle is inactive and isn't animating.Fixes #22036.