Material-ui: CircularProgress wobbles in Chrome 67

[rwollgar]

• [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

Smooth animation, no wobble

Current Behavior

Circular Progress animation wobbles

Steps to Reproduce (for bugs)

Check your Progress documentation page in Chrome 67

-->

1.
2.
3.
4.

Context

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.1.0 |
| React | 16.4 |
| browser | chrome 67 |
| etc | windows 10 x64 |

[oliviertassinari]

Without much information, I'm gonna assume it's a duplicate of #10327. We have already done our best to optimize the component. You might see the browser environment limits.

[rwollgar]

load https://material-ui.com/demos/progress/ in chrome 67 to see what I
mean.
The animation runs smooth but wobbles.

It looks fine in Chrome 66.

On 31 May 2018 at 18:23, Olivier Tassinari [e-mail] wrote:

Without much information, I'm gonna assume it's a duplicate of #10327
https://github.com/mui-org/material-ui/issues/10327. We have already
done our best to optimize the component. You might see the browser
environment limits.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/mui-org/material-ui/issues/11651#issuecomment-393452727,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAftEP5c3Nz1nH3lrZNNrJRFTi9TxOeSks5t36h4gaJpZM4UUZpX
.

--

Rainer Wollgarten

'Seize the moment. Remember all those women on the Titanic who waved off
the dessert cart’Erma BombeckTwenty years from now you will be more
disappointed by the things thatyou didn't do than by the ones you did do.
So throw off the bowlines. Sail away from the safe harbor. Catch the trade
winds in your sails. *
*Explore. Dream. Discover. (Mark Twain
http://www.quotationreference.com/quotefinder.php?strt=1&subj=Mark+Twain&byax=1&lr=)

[oliviertassinari]

[uvtzxpm]

@oliviertassinari This is likely to be a Chrome bug, possibly this one is related:

https://bugs.chromium.org/p/chromium/issues/detail?id=841439

[oliviertassinari]

@uvtzxpm It's most likely a Chrome bug. I'm not sure how to work around it. It would be good to open an issue on their side.

[rwollgar]

Hi Oliver,

Although I agree that this is likely a Chrome bug these spinners don't
wobble: https://www.w3schools.com/howto/howto_css_loader.asp
I am not sure but it looks like they are not done using SVG.

On 1 June 2018 at 06:28, Olivier Tassinari [e-mail] wrote:

@uvtzxpm https://github.com/uvtzxpm It's most likely a Chrome bug. I'm
not sure how to work around it. It would be good to open an issue on their
side.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/mui-org/material-ui/issues/11651#issuecomment-393669036,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAftEJKAOhj09agexOTmoR3BO30cI_dpks5t4FKIgaJpZM4UUZpX
.

--

Rainer Wollgarten

'Seize the moment. Remember all those women on the Titanic who waved off
the dessert cart’Erma BombeckTwenty years from now you will be more
disappointed by the things thatyou didn't do than by the ones you did do.
So throw off the bowlines. Sail away from the safe harbor. Catch the trade
winds in your sails. *
*Explore. Dream. Discover. (Mark Twain
http://www.quotationreference.com/quotefinder.php?strt=1&subj=Mark+Twain&byax=1&lr=)

[franklixuefei]

@oliviertassinari @rwollgar Strangely enough, it happened for me only on a non-4k screen. It worked perfectly on a 4k screen. And it only happens occasionally.

[rwollgar]

My screen is 2560 * 1440, not sure if that is 4k.

On Wed, 13 Jun 2018 at 14:05, Xuefei Li [e-mail] wrote:

@oliviertassinari https://github.com/oliviertassinari @rwollgar
https://github.com/rwollgar Strangely enough, it happened for me only
on a non-4k screen. It worked perfectly on an 4k screen.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mui-org/material-ui/issues/11651#issuecomment-396806857,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAftEMqo2uQHqsYmvfLC_FQt_8LT092Aks5t8I-lgaJpZM4UUZpX
.

--

Rainer Wollgarten

'Seize the moment. Remember all those women on the Titanic who waved off
the dessert cart’Erma BombeckTwenty years from now you will be more
disappointed by the things thatyou didn't do than by the ones you did do.
So throw off the bowlines. Sail away from the safe harbor. Catch the trade
winds in your sails. *
*Explore. Dream. Discover. (Mark Twain
http://www.quotationreference.com/quotefinder.php?strt=1&subj=Mark+Twain&byax=1&lr=)

[CodingToBeWithHer]

has anybody found a way around it?

It looks something like:
https://streamable.com/59n8e

if it's already fixed what do I need to add to not change my current version of material ui that I'm using? I'm using: 1.0.0-beta.34

[oliviertassinari]

I'm using: 1.0.0-beta.34

@CodingToBeWithHer Use 1.3.1 and you will be good or review #11886.

[CodingToBeWithHer]

@oliviertassinari thx for a quick answer

So I just need to update two files:
packages/material-ui/src/CircularProgress/CircularProgress.js
packages/material-ui/src/CircularProgress/CircularProgress.test.js

right ?

[rgraffbrd]

@oliviertassinari CircularProgress could function like this, it requires 0 JS and NO ELEMENT ROTATION. https://jsfiddle.net/resistdesign/woes50pa/

[oliviertassinari]

@rgraffbrd What's the advantage vs the current implementation?

[rgraffbrd]

@oliviertassinari The advantages are 2 fold:

1. It seems the current implementation may be running some JavaScript that triggers React to re-render, at least in that component and the HTML element attributes are being updated. That comes with some overhead that this CSS solution avoids.
2. More importantly, is the fact that the current solution actually rotates an element and the problem with that is that the element's mathematical dimensions, including center, need to be resolved to specific pixels, so during rotation the center can very likely move between 2 pixels, both vertically and horizontally. This causes a wobble effect. In this CSS solution, the rotation is achieved by simply animating the offset of the start of the stroke at the right speed. This simply causes portions of the stroke to be drawn/redrawn and doesn't required the positioning of the element to be recalculated so you are far less likely to see any kind of deviation there.

There's probably even more to it from an optimization standpoint, but that is the basis of the whole issue and this solution.

[oliviertassinari]

@rgraffbrd 1. We don't run any JavaScript to power the circle progress animation. 2. The rotation both allows to better follow the specification and to work around this problem: https://material-ui.com/demos/progress/#limitations. The wobble effect was fixed two months ago.
So, I don't see the need to change the implementation.

[rwollgar]

Hi Oliver,

I didn't write the above, about changing the implementation.

Cheers
Rainer

On Thu, 13 Sep 2018 at 07:41, Olivier Tassinari [e-mail]
wrote:

@rwollgar https://github.com/rwollgar 1. We don't run any JavaScript to
power the circle progress animation. 2. The rotation both allows to better
follow the specification and to work around this problem:
https://material-ui.com/demos/progress/#limitations. The wobble effect
was fixed two months ago.
So, I don't see the need to change the implementation.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mui-org/material-ui/issues/11651#issuecomment-420807369,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAftEPFd8_zWs-dJpzKfDeCCGmgLQHR1ks5uaX-IgaJpZM4UUZpX
.

--

Rainer Wollgarten

'Seize the moment. Remember all those women on the Titanic who waved off
the dessert cart’Erma BombeckTwenty years from now you will be more
disappointed by the things thatyou didn't do than by the ones you did do.
So throw off the bowlines. Sail away from the safe harbor. Catch the trade
winds in your sails. *
*Explore. Dream. Discover. (Mark Twain
http://www.quotationreference.com/quotefinder.php?strt=1&subj=Mark+Twain&byax=1&lr=)