search

FN-FAL113 / github-readme-steam-card

:video_game: A dynamically generated steam card for your github readme
https://github-readme-steam-card.vercel.app
GNU General Public License v3.0
17 stars 3 forks source link

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

Open AlfinIndrawan opened 3 weeks ago

AlfinIndrawan commented 3 weeks ago

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 commented 3 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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. https://github.com/github/markup/issues/1864

AlfinIndrawan commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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.