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: blurry ripples for slide-toggle, radio, checkbox in MS edge. #8514

Merged
merged 1 commit into from Nov 29, 2017

Conversation

devversion
Copy link
Member

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.

A low-quality GIF that shows the issue again:
https://gyazo.com/2f6d98faca9efd779260dd0a06212c3b

Fixes #8392

@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Nov 17, 2017
Copy link
Contributor

@tinayuangao tinayuangao left a comment

Choose a reason for hiding this comment

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

LGTM

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 added pr: lgtm action: merge The PR is ready for merge by the caretaker and removed pr: needs review labels Nov 17, 2017
@tinayuangao tinayuangao merged commit 8b7a3af into angular:master Nov 29, 2017
@devversion devversion deleted the fix/ripples-blurry-edge branch November 29, 2017 19:20
tinayuangao pushed a commit to tinayuangao/material2 that referenced this pull request Nov 29, 2017
…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.
Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Ripple animation on some controls has jagged edges
4 participants