[PR #1096] [MERGED] Fixing blurry us flag in Safari #1204

New issue

Closed

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

kerem commented

2026-03-03 14:42:37 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/lipis/flag-icons/pull/1096
Author: @gucr
Created: 3/27/2023
Status: ✅ Merged
Merged: 3/28/2023
Merged by: @NotTsunami

Base: main ← Head: fix-us-safari

📝 Commits (2)

74aea1d Fixing blurry us flag when zooming on a flag in Safari (iOS & Mac OS).
f4001e2 Removing usage of to make flag editable in Illustrator & Inkscape

📊 Changes

2 files changed (+17 additions, -27 deletions)

View changed files

📝 flags/1x1/us.svg (+8 -13)
📝 flags/4x3/us.svg (+9 -14)

📄 Description

Fixing a corner case about the US flag in Safari (reproduced in iOS & Mac OS).

When the flag is set to a small size (let's say 20px) and the user zooms in, Safari is not able to render SVG properly. What appens is that the browser creates a raster of the pattern at paint time which is not updated whenever the user zooms.

This new version takes advantage of the marker SVG element which is has a complete cross browser support and fixes the bug above.

See #1088

_{🔄 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/1096 **Author:** [@gucr](https://github.com/gucr) **Created:** 3/27/2023 **Status:** ✅ Merged **Merged:** 3/28/2023 **Merged by:** [@NotTsunami](https://github.com/NotTsunami) **Base:** `main` ← **Head:** `fix-us-safari` --- ### 📝 Commits (2) - [`74aea1d`](https://github.com/lipis/flag-icons/commit/74aea1d8a7a5fdf1e5389da93e7adf7f5b3f763f) Fixing blurry us flag when zooming on a flag in Safari (iOS & Mac OS). - [`f4001e2`](https://github.com/lipis/flag-icons/commit/f4001e2302add425cd2fae9dd1a1d81028944ca3) Removing usage of <use/> to make flag editable in Illustrator & Inkscape ### 📊 Changes **2 files changed** (+17 additions, -27 deletions) <details> <summary>View changed files</summary> 📝 `flags/1x1/us.svg` (+8 -13) 📝 `flags/4x3/us.svg` (+9 -14) </details> ### 📄 Description Fixing a corner case about the US flag in Safari (reproduced in iOS & Mac OS). When the flag is set to a small size (let's say 20px) and the user zooms in, Safari is not able to render SVG properly. What appens is that the browser creates a raster of the pattern at paint time which is not updated whenever the user zooms. This new version takes advantage of the [marker SVG element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker) which is has a complete cross browser support and fixes the bug above. See #1088 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>