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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

must borderRadius be unitless for crossfade effect ? #1413

Closed
ArianHamdi opened this issue Jan 9, 2022 · 3 comments 路 Fixed by #1416
Closed

must borderRadius be unitless for crossfade effect ? #1413

ArianHamdi opened this issue Jan 9, 2022 · 3 comments 路 Fixed by #1416
Labels
bug Something isn't working

Comments

@ArianHamdi
Copy link

1. Read the FAQs 馃憞

2. Describe the bug

when I want to change borderRadius during the crossfade effect if I add a unit e.g. borderRadius : "20px" or borderRadius : "20%" , it doesn't work properly as I expected. Thus I was forced to omit the unit e.g. borderRadius : 20.

Is it a bug or it's normal for you?

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/s/objective-fermat-t4hq0?file=/src/App.js

4. Steps to reproduce

  1. Open codesandbox link.
  2. Click on an element to see the crossfade effect and smooth changes in borderRadius.
  3. Add unit to borderRadius e.g. "20px".
  4. Now click on an element and see borderRadius changes. you can see that the changes are not smooth.
@ArianHamdi ArianHamdi added the bug Something isn't working label Jan 9, 2022
@ShahriarKh
Copy link

馃 Seems to be a bug with pixel units.
I checked the browser console. Unitless border-radius is converted to percentages.
image

@mattgperry
Copy link
Collaborator

Yeah I think if it鈥檚 a string it鈥檚 handled as a percentage, number for pixels. We should probably check for the px

@mattgperry
Copy link
Collaborator

My mistake its that strings aren't supported at all for crossfading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants