Error displaying images with "Languages Used (By File Size)"

[NhanAZ]

Error description photo

Device used in the photo

Android 11; Redmi Note 8 Build/RKQ1.201004.002

Browser version used in the photo

Chrome 96.0.4664.92

[jstrieb]

Thanks for the details in the bug report! I was able to replicate this in Chrome on Desktop (see attached video). The issue appears to be with some internal padding value in the CSS. I will leave this open for documentation until I can fix the problem.

2021-12-13.03-54-35.mp4

[jstrieb]

For anyone who is considering working on this, but is intimidated or unsure how to get started, I would be happy to help! Feel free to post any questions in this thread. A fix would involve you forking the repository, making some changes, committing and pushing those to your fork, and making a pull request on GitHub that we can work together on until it's ready to merge. At the end, your GitHub profile will be listed as a "contributor" on this repo!

I expect (i.e., guess) that the places where the file might need to be changed are probably some or all of:

• github-stats/templates/languages.svg

  Line 11 in 60ba361

  height: calc(100% - 10px);

• github-stats/templates/languages.svg

  Line 21 in 60ba361

  height: calc(100% - 10px - 24px);

• github-stats/templates/languages.svg

  Line 100 in 60ba361

  <foreignObject x="21" y="17" width="318" height="176">

If you want to try fixing this, you should go through the values in the list above and play around with them in the generated/languages.svg file until something works. Then, commit the changes in templates/languages.svg. After that, we can work together to test in other browsers and make sure everything looks right.

Thanks in advance to anyone who takes the time to help out with this!

[Froderick-Fronkensteen]

Hey @jstrieb I was wondering if I could attempt to help with this one?

[jstrieb]

Hey @jstrieb I was wondering if I could attempt to help with this one?

Hey @Froderick-Fronkensteen, please do! If you can get it fixed, make a PR, and we can work to try it on some devices and get it merged in. Thanks for your interest in the project!

[vidit21srivastava]

Hey @jstrieb, if this issue hasn't been resolved yet, I would like to work on it.

[jstrieb]

Hi @vidit21srivastava! This issue has not yet been resolved, and I would appreciate your help with it.

[NazmusSayad]

Hey @jstrieb , first I was thinking that the "height" of "foreignObject" is causing the problem. But later I got a strange thing. What is this class doing here? By removing it's "height" everything is ok.

Please checkout that.