Skip to content

Fix country flag emojis not rendering on Microsoft Edge/Windows#59

Draft
Copilot wants to merge 2 commits intomainfrom
copilot/fix-issue-52-bug
Draft

Fix country flag emojis not rendering on Microsoft Edge/Windows#59
Copilot wants to merge 2 commits intomainfrom
copilot/fix-issue-52-bug

Conversation

Copy link

Copilot AI commented Mar 5, 2026

Windows omits flag emoji glyphs from its system emoji font, and Chromium-based browsers (Edge, Chrome) don't bundle their own — causing all flag emojis to render as two-letter country codes (e.g. US) instead of 🇺🇸.

Changes

  • country-flag-emoji-polyfill — added as a dependency; uses canvas-based detection to determine if flag emojis are unsupported, then injects a @font-face rule for the Twemoji Country Flags font only when needed (no-op on Mac/Linux/Firefox)
  • public/fonts/TwemojiCountryFlags.woff2 — font copied from the npm package for self-hosting; avoids CDN dependency
  • providers.tsx — calls polyfillCountryFlagEmojis() on mount with the self-hosted font path:
    React.useEffect(() => {
      polyfillCountryFlagEmojis('Twemoji Country Flags', '/fonts/TwemojiCountryFlags.woff2');
    }, []);
  • Theme.ts — prepends "Twemoji Country Flags" to the MUI fontFamily. The font's unicode-range: U+1F1E6-1F1FF scopes it exclusively to regional indicator code points, leaving all other text rendering unaffected

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • download.cypress.io
    • Triggering command: /opt/hostedtoolcache/node/24.14.0/x64/bin/node /opt/hostedtoolcache/node/24.14.0/x64/bin/node index.js --exec install (dns block)
    • Triggering command: /opt/hostedtoolcache/node/24.14.0/x64/bin/node /opt/hostedtoolcache/node/24.14.0/x64/bin/node dist/index.js --exec install (dns block)
  • www.npmjs.com
    • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node /home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps /home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

@vercel
Copy link

vercel bot commented Mar 5, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
mobilitydatabase-web Ready Ready Preview, Comment Mar 5, 2026 1:11am

Request Review

Co-authored-by: Alessandro100 <18631060+Alessandro100@users.noreply.github.com>
@CLAassistant
Copy link

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

Copilot AI changed the title [WIP] Fix issue 52 bug in web application Fix country flag emojis not rendering on Microsoft Edge/Windows Mar 5, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants