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

[Bug Report][3.6.10] ProgressCircular blurry #20089

Open
simonflick opened this issue Jul 2, 2024 · 0 comments
Open

[Bug Report][3.6.10] ProgressCircular blurry #20089

simonflick opened this issue Jul 2, 2024 · 0 comments

Comments

@simonflick
Copy link

Environment

Vuetify Version: 3.6.10
Vue Version: 3.4.31
Browsers: Firefox 127.0
OS: Windows 10

Steps to reproduce

Create a circular progress with model-value of e.g. 80 and no other props.

Expected Behavior

Crisp rendering of the circles.

Actual Behavior

It will look blurry on some browsers / zoom levels.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

This is caused by rotating the whole SVG with CSS transformation. If you manually wrap the circles in a <g transform="rotate(-90)" transform-origin="50% 50%"> and remove the CSS transformation, the problem disappears.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant