🐛 Bug Report - <title>

[aramir]

Bug description

Follow up to #92 -- awesome job on the flags, SVG ones look much better, especially on high-DPI devices!

There is a weird visual bug, where a line at the bottom of flags seems to be showing a line from the top. Here is a screenshot with a zoomed-in section which illustrates it:

It's less visible on some flags, but it looks like it's like that for all of them.

Reproduction URL

No response

Reproduction steps

All very standard:

<PhoneInput {...field}
  enableSearch={false}
  distinct
  enableArrow
  country="..."
  onlyCountries={["..."]} />} 
/>

screenshot above is for "KY" and "GB"

Screenshots

Logs

Browsers

Chrome

OS

Windows

[ArtyomVancyan]

@aramir, I tried to reproduce the issue on the playground server, but no matter how much I zoom in, I couldn't see any line at the bottom of the flags.

[aramir]

Hm, you are right! It doesn't show on playground for me either...
I've created a bare minimum repro project: https://github.com/aramir/Phone-Input-Test
Could you please try running it and see how it looks for you? (the usual npm install && npm run dev)

Here are the screen (chrome/latest 142.0.7444/176) on Win:

(Gemany/de is the most visible because of the bright yellow/black contrast)

[ArtyomVancyan]

@aramir, thanks a lot! I couldn't reproduce the issue without your help. The issue was occurring only on Chrome-based browsers. So, I fixed the issue, and it will be included in the next release.

[aramir]

Nice and fast fix -- glad I was able to assist!