Swiss Invasion

[benjaminpjones]

Describe the bug
I'm not sure if the Swiss flag is too high or the LGBT flag is too low, but a thin red line is rendered at the bottom of the LGBT flag.

Two possible fixes:

1) Change the css for the LGBT flag
2) Remove the top row of pixels from the Swiss flag

But I sense there is some off-by-one error for the entire world-flags-sprite that only became apparent when square flags were added.

Also note: this issue exists for both 16px and 32px variants.

System info: Firefox, Mac; Firefox, Android (Samsung S10e)

cc: @hobeika @okonomichiyaki

[hobeika]

Could this be related to the recent merge of #2042 ?
I don't recall this collateral damage at the time I updated the Swiss flag.

Also f41f357 seems to have added some rules regarding the bottom settings of the .player-flag:
bottom: -0.2rem;

[benjaminpjones]

It couldn't have been #2042 since I've noticed this issue for quite a while, but only recently reported it. I also don't think it was bottom: -0.2rem; since that dictates positioning, but not the actual height of the image.

However I dug in a bit more and seem to have found the reason for this. The pixel math checks out for all three flags, so no reason to change the CSS position. However, there is some image interpolation that introduces blur (at least in the browsers/screen resolutions I am using). To demonstrate the issue, I have increased the height of an icon to show both flags:

On the left is the default rendering (image-rendering: auto), which on my devices introduces a little blur. On the right, I modified the CSS to not add blur (image-rendering: crisp-edges), and with this setting the overlap is no longer an issue.

This may explain why you didn't see this yourself - I don't know if this blurring occurs on all browsers.

So I think these are the solutions I see:

• Don't allow flags to be within one pixel of the "boundary"
  • In other words, I might replace the 16x16 and 32x32 flags with 14x14 and 28x28 flags respectively
• Modify the CSS to prevent blur (image-rendering: pixelated or image-rendering: crisp-edges)

Any thoughts on which solution is preferable?

[okonomichiyaki]

That's interesting, nice investigation

I don't know if this blurring occurs on all browsers

Was able to confirm the behavior on firefox on mac but I don't see it on chrome on mac or on either firefox or chrome on windows. I'm not an expert in browser rendering, but the pixelated/crisp edges change looks like it works. But the real issue seems to be not enough buffer in the sprite file? I don't have strong thoughts about this as I'm not an experienced front end developer

[benjaminpjones]

Was able to confirm the behavior on firefox on mac but I don't see it on chrome on mac or on either firefox or chrome on windows.

On windows, is it a normal resolution screen? My hypothesis is the blur gets triggered when the image needs to rescale. This would make sense if Mac and mobile retina/2x res, but your windows screen is regular res.

But the real issue seems to be not enough buffer in the sprite file?

I agree here - who knows what subtle browser changes could trigger this again in the future!

Making square flags 28px and 14px should give us at least 2px buffer and make the flags more similar in size to their rectangular counterparts. I noticed there are more square flags in the fantasy(?) section, so I'll try to modify the scripts to add this buffer automatically as well.

[github-actions]

This issue has been marked stale and will be closed soon without further activity. To keep the issue open, please respond to the comment to keep the discussion going.

[benjaminpjones]

While this is still an issue with 16px flags, 32 has been fixed by online-go/world-flags-sprite#4

Given modern screen resolutions, and that downscaling doesnt look too bad, I recommend deprecating the 16px flags altogether and using scaling to achieve "small" and "big" sizes.