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

Ripple animation on some controls has jagged edges #8392

Closed
wuchtig opened this issue Nov 12, 2017 · 3 comments · Fixed by #8514
Closed

Ripple animation on some controls has jagged edges #8392

wuchtig opened this issue Nov 12, 2017 · 3 comments · Fixed by #8514
Assignees
@devversion
Labels
P4 A relatively minor issue that is not relevant to core functions

Comments

@wuchtig
Copy link

wuchtig commented Nov 12, 2017

Bug, feature request, or proposal:

Ripple animation on mat-radio-button, mat-checkbox and mat-slide-toggle has jagged edges.

What is the expected behavior?

The round ripple should be smooth.

What is the current behavior?

checkbox

What are the steps to reproduce?

Look at Material Demo Site Checkbox, RadioButton or SlideToggle.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

MSEdge: 41.16299.15.0
Material: 5.0.0-rc0-3ca801a
@jelbourn jelbourn added the P4 A relatively minor issue that is not relevant to core functions label Nov 14, 2017
@jelbourn
Copy link
Member

@devversion is this just an Edge thing?

@devversion
Copy link
Member

I was able to reproduce this in Edge and it's makes the ripples on all of those components really unelegant. We can fix this by no longer clipping the ripples using border-radius.

Ripples are circular by default and since the ripples are always centered we can just use the default radius of those.

devversion added a commit to devversion/material2 that referenced this issue Nov 17, 2017
@devversion
fix: blurry ripples for slide-toggle, radio, checkbox in MS edge.
6dbb387 
Fixes blurry ripples in the slide-toggle, radio and checkbox in Microsoft Edge. The ripples have been blurry because the `border-radius` in an absolute position seems to cause render problems for Edge.

Since the ripples are circular by default, the `border-radius` can be removed and the ripple radius just needs to be set to the value that has been set through CSS before this change. This fixes the blurry ripples in MS Edge and might also improve rendering-stability of the ripples.

Fixes angular#8392
@devversion devversion mentioned this issue Nov 17, 2017
Merged
devversion added a commit to devversion/material2 that referenced this issue Nov 17, 2017
@devversion
fix: blurry ripples for slide-toggle, radio, checkbox in MS edge.
bd40356 
Fixes blurry ripples in the slide-toggle, radio and checkbox in Microsoft Edge. The ripples have been blurry because the `border-radius` in an absolute position seems to cause render problems for Edge.

Since the ripples are circular by default, the `border-radius` can be removed and the ripple radius just needs to be set to the value that has been set through CSS before this change. This fixes the blurry ripples in MS Edge and might also improve rendering-stability of the ripples.

Fixes angular#8392
devversion added a commit to devversion/material2 that referenced this issue Nov 17, 2017
@devversion
fix: blurry ripples for slide-toggle, radio, checkbox in MS edge.
cb0dcb5 
Fixes blurry ripples in the slide-toggle, radio and checkbox in Microsoft Edge. The ripples have been blurry because the `border-radius` in an absolute position seems to cause render problems for Edge.

Since the ripples are circular by default, the `border-radius` can be removed and the ripple radius just needs to be set to the value that has been set through CSS before this change. This fixes the blurry ripples in MS Edge and might also improve rendering-stability of the ripples.

Fixes angular#8392
tinayuangao pushed a commit that referenced this issue Nov 29, 2017
@devversion @tinayuangao
fix: blurry ripples for slide-toggle, radio, checkbox in MS edge. (#8514
8b7a3af 
)

Fixes blurry ripples in the slide-toggle, radio and checkbox in Microsoft Edge. The ripples have been blurry because the `border-radius` in an absolute position seems to cause render problems for Edge.

Since the ripples are circular by default, the `border-radius` can be removed and the ripple radius just needs to be set to the value that has been set through CSS before this change. This fixes the blurry ripples in MS Edge and might also improve rendering-stability of the ripples.

Fixes #8392
tinayuangao pushed a commit to tinayuangao/material2 that referenced this issue Nov 29, 2017
@devversion @tinayuangao
fix: blurry ripples for slide-toggle, radio, checkbox in MS edge. (an…
98ecbab 
…gular#8514)

Fixes blurry ripples in the slide-toggle, radio and checkbox in Microsoft Edge. The ripples have been blurry because the `border-radius` in an absolute position seems to cause render problems for Edge.

Since the ripples are circular by default, the `border-radius` can be removed and the ripple radius just needs to be set to the value that has been set through CSS before this change. This fixes the blurry ripples in MS Edge and might also improve rendering-stability of the ripples.

Fixes angular#8392
@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 Sep 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@devversion devversion

Labels
P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: blurry ripples for slide-toggle, radio, checkbox in MS edge. devversion/material2
3 participants
@jelbourn @wuchtig @devversion