Material-ui: [CircularProgress] Wobbling in IE 11

[gkrinc]

Problem description

The animation on CircularProgress isn't clean any more...there's artifacts (Chrome) that appear and disappear and the animation wobbles (all browsers).

Link to minimally-working code that reproduces the issue

http://www.webpackbin.com/NJoa5sfXf

[Chrome]

[Safari]

Versions

• Material-UI: 0.16.4
• React: 15.4.1
• Browser: Chrome 54.0, Safari 10.0.1

[randex]

Almost the same problem for me in 0.16.5. Don't have artifacts, but the animation wobbles in all browsers, too.

[oliviertassinari]

We have been porting the component on the next branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.

[luky1984]

This loader is still wobbly in IE11 as stated on the screen of Safari. To fix it add the following css rule:

        indeterminate: {
            animation: "$circular-rotate 1.4s linear infinite",
        },
        "@keyframes circular-rotate": {
            "0%": {
                transformOrigin: "50% 50%",
            },
            "100%": {
                transform: "rotate(360deg)",
            },
        },

(Transform origin)

Credits: https://stackoverflow.com/a/47802698/4870273

[oliviertassinari]

@luky1984 Do you want to open a pull request to fix it in the core directly?

diff --git a/packages/material-ui/src/CircularProgress/CircularProgress.js b/packages/material-ui/src/CircularProgress/CircularProgress.js
index 99409ca1c..ca56e2410 100644
--- a/packages/material-ui/src/CircularProgress/CircularProgress.js
+++ b/packages/material-ui/src/CircularProgress/CircularProgress.js
@@ -65,6 +65,10 @@ export const styles = (theme) => ({
     strokeDashoffset: '0px', // Add the unit to fix a Edge 16 and below bug.
   },
   '@keyframes circular-rotate': {
+    '0%': {
+      // Fix IE 11 wobbly
+      transformOrigin: '50% 50%',
+    },
     '100%': {
       transform: 'rotate(360deg)',
     },

[AmirAhrari]

Can i send pull request on this?

[oliviertassinari]

@AmirAhrari Sure :)

[luky1984]

@luky1984 Do you want to open a pull request to fix it in the core directly?

diff --git a/packages/material-ui/src/CircularProgress/CircularProgress.js b/packages/material-ui/src/CircularProgress/CircularProgress.js
index 99409ca1c..ca56e2410 100644
--- a/packages/material-ui/src/CircularProgress/CircularProgress.js
+++ b/packages/material-ui/src/CircularProgress/CircularProgress.js
@@ -65,6 +65,10 @@ export const styles = (theme) => ({
     strokeDashoffset: '0px', // Add the unit to fix a Edge 16 and below bug.
   },
   '@keyframes circular-rotate': {
+    '0%': {
+      // Fix IE 11 wobbly
+      transformOrigin: '50% 50%',
+    },
     '100%': {
       transform: 'rotate(360deg)',
     },

Sorry i was little bit busy.

[oliviertassinari]

Update: we are reverting the fix proposed in https://github.com/mui-org/material-ui/issues/5735#issuecomment-630076891 as it harms the performance of the animation in the latest browsers: #22815.