[PR #1251] [MERGED] Fix overlapping paths in at, bg, ee, lu, nl, ru flags #1291

New issue

Closed

opened 2026-03-03 14:43:00 +03:00 by kerem · 0 comments

kerem commented

2026-03-03 14:43:00 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/lipis/flag-icons/pull/1251
Author: @mpsijm
Created: 5/28/2024
Status: ✅ Merged
Merged: 5/29/2024
Merged by: @lipis

Base: main ← Head: fix-overlap

📝 Commits (1)

e125d4c Fix overlap in at, bg, ee, lu, nl, ru

📊 Changes

12 files changed (+30 additions, -46 deletions)

View changed files

📝 flags/1x1/at.svg (+2 -4)
📝 flags/1x1/bg.svg (+3 -5)
📝 flags/1x1/ee.svg (+3 -5)
📝 flags/1x1/lu.svg (+2 -2)
📝 flags/1x1/nl.svg (+2 -2)
📝 flags/1x1/ru.svg (+3 -5)
📝 flags/4x3/at.svg (+2 -4)
📝 flags/4x3/bg.svg (+3 -5)
📝 flags/4x3/ee.svg (+3 -5)
📝 flags/4x3/lu.svg (+2 -2)
📝 flags/4x3/nl.svg (+2 -2)
📝 flags/4x3/ru.svg (+3 -5)

📄 Description

Hello,

I have been investigating a border-radius issue with the Estonian flag at https://github.com/DOMjudge/domjudge/issues/2537.
As can be seen at https://www.domjudge.org/demoweb/public, there's a faint gray border in the corners of the flag:

After a lot of digging and thinking this was a bug in all browsers' rendering engines, I came to the conclusion that the flag included a black rectangle spanning the entire background. Changing this rectangle to only span one-third of the flag, appears to fix it 😄

Before	After

I've applied the same fix to an arbitrary selection of other flags that use three horizontal bands, because I don't really know a good way to (semi-)automate this and don't feel like fixing all flags manually 😛 Nonetheless, every little bit helps, and I hope this PR helps as well 🙂

Quick-and-dirty HTML file that I used to test:

<!DOCTYPE html>
<html>
    <head>
        <title>Border Radius Test</title>
        <style>
            img {
                border-radius: 80px;
                margin: 40px;
                width: 320px;
            }
        </style>
    </head>
    <body style="background:white">
        <img src="/flags/1x1/at.svg" />
        <img src="/flags/1x1/bg.svg" />
        <img src="/flags/1x1/ee.svg" />
        <img src="/flags/1x1/lu.svg" />
        <img src="/flags/1x1/nl.svg" />
        <img src="/flags/1x1/ru.svg" />
        <br />
        <img src="/flags/4x3/at.svg" />
        <img src="/flags/4x3/bg.svg" />
        <img src="/flags/4x3/ee.svg" />
        <img src="/flags/4x3/lu.svg" />
        <img src="/flags/4x3/nl.svg" />
        <img src="/flags/4x3/ru.svg" />
    </body>
</html>

Place this file in the repo's root and run python3 -m http.server to test. Change background:white to something else to make sure that the white bars are actually there.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/lipis/flag-icons/pull/1251 **Author:** [@mpsijm](https://github.com/mpsijm) **Created:** 5/28/2024 **Status:** ✅ Merged **Merged:** 5/29/2024 **Merged by:** [@lipis](https://github.com/lipis) **Base:** `main` ← **Head:** `fix-overlap` --- ### 📝 Commits (1) - [`e125d4c`](https://github.com/lipis/flag-icons/commit/e125d4cc0e84b8b886c4f87c7d7d15f4859bcb21) Fix overlap in at, bg, ee, lu, nl, ru ### 📊 Changes **12 files changed** (+30 additions, -46 deletions) <details> <summary>View changed files</summary> 📝 `flags/1x1/at.svg` (+2 -4) 📝 `flags/1x1/bg.svg` (+3 -5) 📝 `flags/1x1/ee.svg` (+3 -5) 📝 `flags/1x1/lu.svg` (+2 -2) 📝 `flags/1x1/nl.svg` (+2 -2) 📝 `flags/1x1/ru.svg` (+3 -5) 📝 `flags/4x3/at.svg` (+2 -4) 📝 `flags/4x3/bg.svg` (+3 -5) 📝 `flags/4x3/ee.svg` (+3 -5) 📝 `flags/4x3/lu.svg` (+2 -2) 📝 `flags/4x3/nl.svg` (+2 -2) 📝 `flags/4x3/ru.svg` (+3 -5) </details> ### 📄 Description Hello, I have been investigating a border-radius issue with the Estonian flag at https://github.com/DOMjudge/domjudge/issues/2537. As can be seen at https://www.domjudge.org/demoweb/public, there's a faint gray border in the corners of the flag: ![image](https://github.com/lipis/flag-icons/assets/9739541/1e36772e-f4fb-4624-9a94-03d855590d39) After a lot of digging and thinking this was a bug in all browsers' rendering engines, I came to the conclusion that the flag included a black rectangle spanning the entire background. Changing this rectangle to only span one-third of the flag, appears to fix it :smile: | Before | After | |---|---| | ![image](https://github.com/lipis/flag-icons/assets/9739541/7a95af9f-1d4f-4c2c-a002-2002130b3644) | ![image](https://github.com/lipis/flag-icons/assets/9739541/e1db5fc4-0b58-4753-aeda-73716a6cff77) | I've applied the same fix to an arbitrary selection of other flags that use three horizontal bands, because I don't really know a good way to (semi-)automate this and don't feel like fixing all flags manually :stuck_out_tongue: Nonetheless, every little bit helps, and I hope this PR helps as well :slightly_smiling_face: <details> <summary>Quick-and-dirty HTML file that I used to test:</summary> ```html <!DOCTYPE html> <html> <head> <title>Border Radius Test</title> <style> img { border-radius: 80px; margin: 40px; width: 320px; } </style> </head> <body style="background:white"> <img src="/flags/1x1/at.svg" /> <img src="/flags/1x1/bg.svg" /> <img src="/flags/1x1/ee.svg" /> <img src="/flags/1x1/lu.svg" /> <img src="/flags/1x1/nl.svg" /> <img src="/flags/1x1/ru.svg" /> <br /> <img src="/flags/4x3/at.svg" /> <img src="/flags/4x3/bg.svg" /> <img src="/flags/4x3/ee.svg" /> <img src="/flags/4x3/lu.svg" /> <img src="/flags/4x3/nl.svg" /> <img src="/flags/4x3/ru.svg" /> </body> </html> ``` Place this file in the repo's root and run `python3 -m http.server` to test. Change `background:white` to something else to make sure that the white bars are actually there. </details> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>