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

Progress Ring radius calculation: High track-width results in ring getting smaller #656

Closed
Xyz3R opened this issue Jan 24, 2022 · 1 comment
Assignees
Labels
bug Things that aren't working right in the library.

Comments

@Xyz3R
Copy link

Xyz3R commented Jan 24, 2022

Describe the bug

The progress ring gets smaller with increasing track-width values. At some point it disappears completely.

To Reproduce

Use a high --track-width on a progress ring.

Demo

https://codepen.io/xyz3r/pen/yLPBzBL?editors=1000

Screenshots

see codepen.

Browser / OS

  • all

Additional information

I found that the radius for the track is calculated the wrong way:
Current calculation: calc(var(--size) / 2 - var(--track-width) * 2)
Notice that the track width is subtracted twice. However, it should actually be subtracted 0.5 times. Changing the formula to
calc(var(--size) / 2 - var(--track-width) * 0.5) fixes the described bug.

@Xyz3R Xyz3R added the bug Things that aren't working right in the library. label Jan 24, 2022
@Xyz3R Xyz3R changed the title Progress Ring Radius calculation: High track-width results in ring getting smaller Progress Ring radius calculation: High track-width results in ring getting smaller Jan 24, 2022
@claviska
Copy link
Member

Good catch, and thanks for the fix. I've updated it in fd43cb4 and verified the size remains the same.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Things that aren't working right in the library.
Projects
None yet
Development

No branches or pull requests

2 participants