Steam card avatar or frame animation doesnt work in firefox or safari web.

[AlfinIndrawan]

i though the example image you provide in documentation (https://github.com/FN-FAL113/github-readme-steam-card/) is static. but when i switch to chrome, all image is animated. firefox and safari doesnt animate at all.

markdown should support this because github snake commit image (https://github.com/Platane/snk) support animation in firefox and safari.

[FN-FAL113]

Hello @AlfinIndrawan! Thank you for putting this up. I'll take a look with firefox. I might not be able to test it on safari since I don't own any apple devices.

[FN-FAL113]

Seems like github's markup is not working properly on firefox compared to chrome. I took some time researching on this matter and the issue might be related to github's image proxy (camo.githubusercontent.com) not properly setting content-security-policy headers (default-src, img-src, style-src) that it breaks on firefox unlike in chrome.

There might be chance recent firefox recent builds may have changed how embed svg's are rendered too. This was tested properly way back but now its not working well on firefox. There is a high chance its on how github markup renders images on firefox.

[FN-FAL113]

opening the link on separate tab works fine on firefox, its animated.
https://github-readme-steam-card.vercel.app/status/?steamid=76561198085145110

This issue is now related to github's markup. I created an issue entry there just in-case.
github/markup#1864

[AlfinIndrawan]

opening the link on separate tab works fine on firefox

that is the odd one. But i need it to embed inside github markdown which doesnt animate at all and my website here using MDX. Thanks for the reply. I know the webs are niche but i appreciate your effort

[FN-FAL113]

I'm testing some edge cases right now, I'll update back here.
Seems like firefox is much more aggressive when it comes to loading images with base64 encoded Data URI and with the imposed CSP contraints by github image proxy..

[FN-FAL113]

So far testing failed, the SVG's are loaded properly with animations when loaded on a separate tab, this might be an issue with github's markup on firefox. Hoping for github to make some adjustments with their markup browser compatibility.