Significant performance difference due to rounded-full compared to 50%

[eevho]

I see that there is already this request #1949 but it doesn't point to animation performance issues
I also see the 50% non-genericity #1949 (comment) but I personally think it's worth it to separate them to get better performance

see minimum realization https://stackblitz.com/edit/nuxt-starter-gxzsej?file=app.vue

[adamwathan]

Hey! Yeah so the browser is trying to animate from 9999px to 8px, which means it has to do:

9998px
9997px
9996px
...
9px
8px

Because every value above 50px looks the same (half the height of the element), the animation looks different because so much time in the animation is spent animating between values that don't change the rendered result.

We can't switch to 50% because that creates elliptical shapes instead of pill shapes, but you can always do 50% using an arbitrary value or use half of the element's height if the element isn't square.

Where you have rounded-100px should be rounded-50px for what it's worth — then the second and third examples behave identically 👍

[eevho]

okay, thanks