Material-ui: [CircularProgress] broken with css * {box-sizing: inherit;} only at chrome 61

[n06rin]

Current Behavior

When I'm using css rule (that used at materialize-css for example)

*, *:before, *:after {
 box-sizing: inherit;
}

on latest versions of chrome (60-61), I see that CircularProgress start looking like a dot.

That occurs only at that version of chrome. Firefox for example is ok.

Steps to Reproduce (for bugs)

live example at codesandbox

Context

That rule is popular solution for example and I guess, it exist in many popular css frameworks.

Maybe workaround exist? I'm tried, something like

svg *, svg *:before, svg *:after {
 box-sizing: inherit;
}

but that didn't fix a problem.

My Environment

| Tech | Version |
|--------------|---------|
| Material-UI |0.19.1 |
| React |15.0.0 |
| browser |chrome 60.0 |

[oliviertassinari]

I wasn't able to reproduce the issue on the v1-beta branch. It should be fixed.

[n06rin]

@oliviertassinari yep, this is work on v1-beta branch. So,what is the best solution? Migrate project on v1-beta now, and later go on v1, or just don't use CircularProgress until v1 was released?

Because I see a lot of changes in imports, and component names.

[oliviertassinari]

@n06rin Some alternative that should be simple to do:

1. Submit a PR to fix this behavior on the master branch or
2. Only use the CircularProgress of the v1-beta branch

[npars]

@n06rin We've found a workaround for this issue, switch the inherit to be border-box:

*, *:before, *:after {
  box-sizing: border-box;
}