starred/flag-icons

Fork 0

mirror of https://github.com/lipis/flag-icons.git synced 2026-04-27 01:46:02 +03:00

[GH-ISSUE #1326] Detailed flags have rendering issues at certain sizes #603

New issue

Closed

opened 2026-03-03 14:39:40 +03:00 by kerem · 5 comments

kerem commented

2026-03-03 14:39:40 +03:00

Owner

Originally created by @a-corsini on GitHub (Jan 21, 2025).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/1326

Hi, I would like to point out that when displaying some flags at a reduced size, they can appear distorted, I believe due to the way the strokes are rendered. Do you have any ideas on how this problem could be tackled?

I created a minimal example with some of the flags concerned. Strangely, some extremely detailed flags look fine even when they are very small, while others don't.
https://codepen.io/rs1-project/pen/qEWMLEL

Here is a screenshot from the linked CodePen, where you can see that the flags of Spain, Portugal and Malta are rendered incorrectly at certain sizes, while other detailed flags are fine.

Originally created by @a-corsini on GitHub (Jan 21, 2025). Original GitHub issue: https://github.com/lipis/flag-icons/issues/1326 Hi, I would like to point out that when displaying some flags at a reduced size, they can appear distorted, I believe due to the way the strokes are rendered. Do you have any ideas on how this problem could be tackled? I created a minimal example with some of the flags concerned. Strangely, some extremely detailed flags look fine even when they are very small, while others don't. https://codepen.io/rs1-project/pen/qEWMLEL Here is a screenshot from the linked CodePen, where you can see that the flags of Spain, Portugal and Malta are rendered incorrectly at certain sizes, while other detailed flags are fine. <img width="495" alt="Image" src="https://github.com/user-attachments/assets/01e83da5-5ef8-4e89-8bde-80f7baa8a0fe" />

kerem closed this issue

2026-03-03 14:39:40 +03:00

kerem commented

2026-03-03 14:39:41 +03:00

Author

Owner

@lipis commented on GitHub (Jan 21, 2025):

Not sure what else can we do about it.. it's up the render engine I guess..

@lipis commented on GitHub (Jan 21, 2025): Not sure what else can we do about it.. it's up the render engine I guess..

kerem commented

2026-03-03 14:39:41 +03:00

Author

Owner

@markvantilburg commented on GitHub (Jan 22, 2025):

Which browser/os are you using? I'm not seeing this with Edge/Chrome/Firefox on Windows 11. It might even be a GPU driver.

@markvantilburg commented on GitHub (Jan 22, 2025): Which browser/os are you using? I'm not seeing this with Edge/Chrome/Firefox on Windows 11. It might even be a GPU driver. ![Image](https://github.com/user-attachments/assets/afe2c4be-4342-42c6-8c42-5fbe82907ecf)

kerem commented

2026-03-03 14:39:41 +03:00

Author

Owner

@a-corsini commented on GitHub (Jan 22, 2025):

I'm using Safari on macOS Sequoia 15.0.
I've just tested the CodePen on Chrome and Firefox and couldn't reproduce the issue, so this might just be one of the many glitches in Safari's SVG rendering engine.

For future reference, I noticed that as long as the font-size is not a multiple of 12 (or maybe 4, I'm not sure), the glitch doesn't occur (eg: 12px → 13px). So play with the font-size and you should be able to solve the issue.

@a-corsini commented on GitHub (Jan 22, 2025): I'm using Safari on macOS Sequoia 15.0. I've just tested the CodePen on Chrome and Firefox and couldn't reproduce the issue, so this might just be one of the many glitches in Safari's SVG rendering engine. For future reference, I noticed that as long as the font-size is not a multiple of 12 (or maybe 4, I'm not sure), the glitch doesn't occur (eg: 12px → 13px). So play with the font-size and you should be able to solve the issue.

kerem commented

2026-03-03 14:39:41 +03:00

Author

Owner

@sulimanbenhalim commented on GitHub (Apr 25, 2025):

I can confirm this is a Safari-specific issue.

The solution is simple: avoid font-size values that are multiples of 12px. Changing from 12px to 13px fixes the rendering problem. Alternatively, using explicit width and height with non-multiples of 12 also works 💯 I tested both approaches and confirmed they resolve the distortion issue :)

@sulimanbenhalim commented on GitHub (Apr 25, 2025): I can confirm this is a Safari-specific issue. The solution is simple: avoid font-size values that are multiples of 12px. Changing from 12px to 13px fixes the rendering problem. Alternatively, using explicit width and height with non-multiples of 12 also works 💯 I tested both approaches and confirmed they resolve the distortion issue :)

kerem commented

2026-03-03 14:39:41 +03:00

Author

Owner

@lipis commented on GitHub (May 29, 2025):

Will close this one.. not much we can do I guess..

@lipis commented on GitHub (May 29, 2025): Will close this one.. not much we can do I guess..

kerem referenced this issue

2026-03-03 14:41:13 +03:00

[PR #603] [MERGED] Optimize flags #893