spikerj/spikersoft-issues
1
0 Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases Wiki Activity

# [Bug] Flag Icons Missing in Language Selection Menu (Chrome) #1148

New Issue
Closed
opened 2026-09-23 04:37:51 +00:00 by enjin2310 · 1 comment
enjin2310 commented 2026-09-23 04:37:51 +00:00
Copy link
Copy source

Summary

In SpikerSoft, the flag icons for language selection (English and Spanish) are not displayed correctly when using Google Chrome. The issue affects the dropdown menu under the user profile, where the language options appear without their corresponding flag icons.

Issue Description

When opening the user profile menu and navigating to the Language selection section, the text options (“English” and “Spanish”) are visible, but the flag icons that should accompany them are missing or fail to render. The issue appears specific to Chrome, as other browsers display the icons correctly.

Environment

Property Value
Application SpikerSoft
Module User Profile → Language Selection
Environment Production
Browser Google Chrome
Operating System Windows 11
Version v2026.09.23c
Device Desktop

Preconditions

User must be logged in and open the profile dropdown menu.

Steps to Reproduce

  1. Open SpikerSoft in Google Chrome.
  2. Click on the User Profile icon in the top-right corner.
  3. Scroll down to the Language selection section.
  4. Observe that the flag icons next to “English” and “Spanish” are missing.

Expected Result

Both language options should display their respective flag icons (e.g., 🇺🇸 for English, 🇪🇸 for Spanish) next to the text labels.

Actual Result

  • Flag icons are missing or not rendered.
  • Only text labels (“English”, “Spanish”) are visible.
  • The layout remains functional but visually incomplete.

Evidence

  • The screenshot shows the Language selection menu with missing flag icons in Chrome.

Impact

  • Reduces visual clarity and user experience.
  • Breaks consistency with other browsers and UI elements.
  • Minor accessibility issue for users relying on visual cues.

Frequency

Always

Reproducibility

100%

Severity

Low

Suggested Fix

  • Verify icon font or image source paths for Chrome compatibility.
  • Ensure flag assets are loaded via HTTPS and not blocked by mixed content policies.
  • Test rendering across major browsers (Chrome, Edge, Firefox, Safari).
  • Consider using inline SVGs or Unicode flag emojis for consistent cross-browser display.
## Summary In **SpikerSoft**, the flag icons for language selection (English and Spanish) are not displayed correctly when using **Google Chrome**. The issue affects the dropdown menu under the user profile, where the language options appear without their corresponding flag icons. ## Issue Description When opening the user profile menu and navigating to the **Language selection** section, the text options (“English” and “Spanish”) are visible, but the flag icons that should accompany them are missing or fail to render. The issue appears specific to Chrome, as other browsers display the icons correctly. ## Environment | Property | Value | |-----------|--------| | Application | SpikerSoft | | Module | User Profile → Language Selection | | Environment | Production | | Browser | Google Chrome | | Operating System | Windows 11 | | Version | v2026.09.23c | | Device | Desktop | ## Preconditions User must be logged in and open the profile dropdown menu. ## Steps to Reproduce 1. Open **SpikerSoft** in **Google Chrome**. 2. Click on the **User Profile** icon in the top-right corner. 3. Scroll down to the **Language selection** section. 4. Observe that the flag icons next to “English” and “Spanish” are missing. ## Expected Result Both language options should display their respective flag icons (e.g., 🇺🇸 for English, 🇪🇸 for Spanish) next to the text labels. ## Actual Result - Flag icons are missing or not rendered. - Only text labels (“English”, “Spanish”) are visible. - The layout remains functional but visually incomplete. ## Evidence - The screenshot shows the **Language selection** menu with missing flag icons in Chrome. ## Impact - Reduces visual clarity and user experience. - Breaks consistency with other browsers and UI elements. - Minor accessibility issue for users relying on visual cues. ## Frequency Always ## Reproducibility 100% ## Severity Low ## Suggested Fix - Verify icon font or image source paths for Chrome compatibility. - Ensure flag assets are loaded via HTTPS and not blocked by mixed content policies. - Test rendering across major browsers (Chrome, Edge, Firefox, Safari). - Consider using inline SVGs or Unicode flag emojis for consistent cross-browser display.
Screenshot 2026-09-23 003426.png
563 KiB
Screenshot 2026-09-23 003426.png
spikerj commented 2026-10-02 03:42:06 +00:00
Owner
Copy link
Copy source

Confirmed and fixed — and noting you're on Windows 11 turned out to be the key detail.

What was wrong: the menu drew the flags with flag emoji (the Unicode characters 🇺🇸 🇪🇸). Mac, iPhone, Android and Linux show those as little flags. Windows' built-in emoji font deliberately has no country flags, so every browser on Windows shows the two letters instead. That's the "us" in your screenshot ("us Language: English"). So it wasn't Chrome-specific: Edge and Firefox on Windows looked the same.

What changed (spikerj/spikersoft-angular#1404, merged)

  • The flags are now small images, the same flag images the site already uses elsewhere, so they look the same on every operating system.
  • That covers the header button (signed out), the mobile menu and the user menu.
  • The English/Spanish options inside the language submenu now each show their flag too. Before, they only had a check mark.

It will be live with the next deploy. Reopen this if the flags are still missing on Windows after that.

Tip: browser and OS in a report are both worth including, as you did. Here the OS was the real cause.

Confirmed and **fixed** — and noting you're on **Windows 11** turned out to be the key detail. **What was wrong:** the menu drew the flags with *flag emoji* (the Unicode characters 🇺🇸 🇪🇸). Mac, iPhone, Android and Linux show those as little flags. Windows' built-in emoji font deliberately has no country flags, so every browser on Windows shows the two letters instead. That's the "us" in your screenshot ("us Language: English"). So it wasn't Chrome-specific: Edge and Firefox on Windows looked the same. **What changed** (spikerj/spikersoft-angular#1404, merged) - The flags are now small images, the same flag images the site already uses elsewhere, so they look the same on every operating system. - That covers the header button (signed out), the mobile menu and the user menu. - The English/Spanish options inside the language submenu now each show their flag too. Before, they only had a check mark. It will be live with the next deploy. **Reopen this** if the flags are still missing on Windows after that. Tip: browser *and* OS in a report are both worth including, as you did. Here the OS was the real cause.
spikerj added the bug label 2026-10-02 03:42:07 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Labels
Clear labels
agentic
Actionable surfaced by the agentic architecture & security review
 bug
Something is not working
 duplicate
This issue or pull request already exists
 enhancement
New feature
 epic
Cross-repo epic — children live in per-repo trackers
 help wanted
Need some help
 invalid
Something is wrong
 question
More information is needed
 sonarqube
Code quality issue surfaced by SonarQube (bug / code smell)
 wontfix
This won't be fixed
No labels bug
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
spikerj (Joseph Spiker)
No Assignees
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#1148