Material-ui: CircularProgress animation's midpoint is off when (size / line-height) <= ~10

[cubeghost]

• [x] This is a v1.x issue (v0.x is no longer maintained).
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

<CircularProgress /> always rotates around its own midpoint

Current Behavior

When the container's line-height is greater than 1 and CircularProgress size is small enough, animation's midpoint is incorrect, resulting in this:

It stops being noticeable around when the size reaches about ~10-11 times the line-height.

Steps to Reproduce (for bugs)

https://codesandbox.io/s/v6rv1880q7

1. Set the line-height on the container surrounding a CircularProgress to greater than 1, and the size on CircularProgress to less than 12 * lineHeight

Context

My application's global line-height is 1.5, and I use <CircularProgress size={16} /> inside of buttons that are not material-ui's buttons

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.2.0 |
| React | 16.4 |
| browser | Chrome 67 |
| etc | |

[oliviertassinari]

@cubeghost This is a nice finding!
What do you think of setting line-height: 1 on the root element of the circular progress? Do you want to work on it?

[adeelibr]

@cubeghost If you aren't working on this, I was planning to work on this myself.

[cubeghost]

@adeelibr go for it! I wasn't going to have time to tackle it soon
@oliviertassinari thanks!

[adeelibr]

I have a PR for this https://github.com/mui-org/material-ui/pull/11781