search

FortAwesome / Font-Awesome

The iconic SVG, font, and CSS toolkit
https://fontawesome.com
Other
73.65k stars 12.19k forks source link

Icons are not spinning #18713

Open vkirienko opened 2 years ago

vkirienko commented 2 years ago

Hi,

After upgrade to v6 all spinning icons in my project are not spinning anymore. Can't make it spin even in simple attached file (assuming node_modules folder exists).

Vlad

sample.zip

tagliala commented 2 years ago

Hi!

Thanks for being part of the Font Awesome Community.

Could you please provide an example that does not require to download a zip file?

https://codesandbox.io/ could do the job, or instead you can create a github repository

vkirienko commented 2 years ago

Here it is. Hope it helps.

https://github.com/vkirienko/Fontawesome

tagliala commented 2 years ago

Icons are spinning fine on my machine. Are you experiencing issues with a particular OS / Browser? Did you check browser's development console?

Could you please fill out our bug report template?

Feel free to edit the first post or create a new issue and close this one

vkirienko commented 2 years ago

Hmmm, it is got to be some kind of corporate policy. It is spinning on my home PC but not on work PC. Need to talk to our desktop team to see what they messed up. :) I'll let you know if I find anything.

In both cases Win10 Pro, Chrome 98, Edge 98.

tagliala commented 2 years ago

Closing here, feel free to comment if you have updates

vkirienko commented 2 years ago

I will take back my comment about corporate policy. When take my sample and fallback to 5.15.4 version of fontawesome animations are working again. I don't see any errors or anything unexpected in dev console and seems like everything looks exactly the same in both cases.

Not sure what else to look for to help to fix.

tagliala commented 2 years ago

Any reproducible test case would help.

https://jsfiddle.net/tagliala/4f8gp2wL/2/

Is it possible that the accessibility feature that enables prefers-reduced-motion media query is enabled on your system?

Ref:

vkirienko commented 2 years ago

This was it. As soon as I enabled this setting icons started to spin even without page refresh.

In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.

So if I'm reading it correctly you started to use prefers-reduced-motion in v6 and that caused issues. Correct?

Julian367 commented 2 years ago

I have the same problem on macOS Monterey 12.3 (21E230) Icons are not spinning. Using Chrome/Safari/Firefox Any solution for macOS? Update: I found the problem. Screenshot 2022-03-30 at 16 36 37

Reduce motion must be uncheck

ximikavt commented 2 years ago

Any plans to do this feature opt in? Because there are some cases when we do not need to turn off animations i.e: using Remote Desktop by default turns off animations.

tagliala commented 2 years ago

Any plans to do this feature opt in? Because there are some cases when we do not need to turn off animations i.e: using Remote Desktop by default turns off animations.

Thanks for this use case.

By "turns off animations", do you mean "sets reduce motion to true"?

Anyway, my thought is: since Font Awesome cannot tell if an animation is important or not, we should assume by default that they are all important and just reduce the speed

ximikavt commented 2 years ago

By "turns off animations", do you mean "sets reduce motion to true"?

Yep.

Anyway, my thought is: since Font Awesome cannot tell if an animation is important or not, we should assume by default that they are all important and just reduce the speed

The best way would be the ability somehow to configure it. But the idea of just slowing it by default is also good.