Large social media icons like YouTube are cropped with some window sizes
I found out that some social media icons were cropped with some window sizes. It's hard to determine the exact criteria but the following factors seem to come into play:
- whether window is so small that it switches to small device (e.g. smartphone) css
- whether the page is long enough that the scrollbar appears (which eats a little of content width)
- the exact window width
An example with the YouTube icon which is provided by the theme (I suppose via FontAwesome):
and an example with a custom .svg, the Ko-fi logo, which I properly formatted to fit in a 16x16 square:
Surprisingly, stretching the window will trigger the bug here and there alternatively, as if the CSS was computing some rounded dimension that was sometimes even or odd, rounded up or down - instead of the bug happening for a certain window range.
https://github.com/user-attachments/assets/e3e139af-b98e-4784-8854-4fe588916ae4
I could reformat the svg to fit in a square with more padding (not sure if I can override the native YouTube icon though), but I'm looking for a cleaner fix. Adding padding didn't help. It looks like the cropping is around the svg itself:
Hello @hsandt, the HEAD of minima:master has moved onto using Font Awesome library to render social platform icons.
While you're free to continue using the theme at the commit you have currently locked to, I would like to know if you can reproduce the issue you've reported with the HEAD commit of minima:master.
Thank you.
@hsandt which commit are you using? Can you check whether this is solved by #808