Detailed flags have rendering issues at certain sizes

[a-corsini]

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.

[lipis]

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

[markvantilburg]

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.

[a-corsini]

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.