Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from
May 29, 2024
Merged

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

merged 1 commit into from
May 29, 2024

Conversation

mpsijm
Copy link
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
Owner

lipis commented May 29, 2024

That's awesome! Thank you!

@lipis lipis merged commit 32db3af into lipis:main May 29, 2024
2 checks passed
@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