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

[cubeghost]

• This is a v1.x issue (v0.x is no longer maintained).
• 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 #11781