Material-ui: [CircularProgress] Only works with Chrome

[pradel]

Circular progress doesn't work on safari, it looks full.

Open next docs in safari.

Versions

• Material-UI: Next branch
• Browser: Safari 9.1.3, 10.1; Firefox 45.8.0

[ghost]

Seems that calc() in stroke-dasharray doesn't work in Safari and Firefox:
CodePen example.

[slavab89]

Should be able to fix it using jss fallbacks i think. But not sure how to make it dynamic with the current style prop? Or should i want for you to update jss to the latest version (along with jss-theme-reactor?) to introduce the dynamic changes?

Also, i didnt find any documentation regarding willChange that you're using. What is it for?

[mbrookes]

@oliviertassinari Looks like another use-case for jss dynamic styles.

[kazazor]

This is also happening on FF (could be also on Edge & IE but I don't have them to test on..)

[oliviertassinari]

Same story on IE11 and Edge 14. Only working with Chrome then 🙈 .

[kazazor]

FYI - the bug in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1258270

[kazazor]

My 2 cents on the issue, it probably should be prioritized very high cause it's better to have fewer components to be used than having some which do not work on all browsers except 1 :)

I'll try to see if I have some time to give it a try but probably gonna be hard to find some

[oliviertassinari]

but probably gonna be hard to find some

Same here.

[arsen]

I have implemented a fallback function in JS for CSS calc, which works fine.
But :(
That fallback function needs the size of the component, which will come with JSS dynamic styles if we update the JSS and ThemeReactor to the latest version. In that case, it will grab it from components "props" and use it.

The bug in Firefox has been reported a year ago and still not fixed, so I think that we should use some kind of JS fallback until it is fixed on the browsers side.

Here are my changes (the "size" property of the component is hardcoded for now):
https://github.com/arsen/material-ui/commit/a8a3527640ffb4ed48f2f3165a951aa99bcdf467

[kazazor]

That fallback function needs the size of the component, which will come with JSS dynamic styles if we update the JSS and ThemeReactor to the latest version. In that case, it will grab it from components "props" and use it.

@arsen / @oliviertassinari - what are the consequences of upgrading those to the latest version? Is that a good path to give with?

[oliviertassinari]

@kazazor I'm working on upgrading JSS. That could be our first use case for the dynamic CSS feature of JSS. I will try to support it.

[slavab89]

Should be possible to move forward with this once https://github.com/callemall/material-ui/issues/7633 is done (Linking for reference and tracking)
Would it be correct to access the created sheet from withStyles in the component so that it will be possible to do update on it?

[eugenesaenko]

Got this issue on Safari 11.0.