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: The bar has wrong radius in small percentages. #439

Open
zraly opened this issue Feb 8, 2023 · 1 comment
Open

Progress: The bar has wrong radius in small percentages. #439

zraly opened this issue Feb 8, 2023 · 1 comment

Comments

@zraly
Copy link

zraly commented Feb 8, 2023

Describe the bug
If the width of the progress is less than its height, the radiuses are smaller.

To Reproduce

  1. Set the percentage of any progress to very small value. Example: https://play.tailwindcss.com/0PQ4gkn6bE

Expected behavior
The radius of the progress bar is the same for all values.

Screenshots
Snímek obrazovky 2023-02-08 v 16 12 59

Desktop (please complete the following information):

  • OS: macOS
  • Browser Chrome

Solution
Add overflow-clip to the wrapping div and set the width of progress bar with style="transform: translateX(calc(-100% + 1%))". But there may be other solutions.

@Sqrcz
Copy link

Sqrcz commented Jan 9, 2025

Hey,

It's been a while since this one was mentioned... it turns out simple overflow-hidden fixes it... as you can see here: https://play.tailwindcss.com/SgTBzNGCEt

image

I can provide PR with the fix if you want.

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

No branches or pull requests

2 participants