Skip to content

Fix overlapping paths in at, bg, ee, lu, nl, ru flags#1251

Merged
lipis merged 1 commit intolipis:mainfrom
mpsijm:fix-overlap
May 29, 2024
Merged

Fix overlapping paths in at, bg, ee, lu, nl, ru flags#1251
lipis merged 1 commit intolipis:mainfrom
mpsijm:fix-overlap

Conversation

@mpsijm
Copy link
Copy Markdown
Contributor

@mpsijm mpsijm commented May 28, 2024

Hello,

I have been investigating a border-radius issue with the Estonian flag at DOMjudge/domjudge#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
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
image image

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.

@lipis
Copy link
Copy Markdown
Owner

lipis commented May 29, 2024

That's awesome! Thank you!

@lipis lipis merged commit 32db3af into lipis:main May 29, 2024
@mpsijm mpsijm deleted the fix-overlap branch May 30, 2024 06:01
@mpsijm mpsijm mentioned this pull request May 30, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@mpsijm @lipis