Misaligned Envelope in New PM notification icon

Contribute UX

AI-generated summary

Users HamMan2118 and Firepup650 are investigating a visual misalignment issue with the envelope icon in the new PM notification badge. HamMan2118 reports the icon appears off-center — sometimes right, sometimes left — across multiple Discourse forums, including Meta, and on both Chrome (desktop) and Safari (iPhone 13 Pro). Firepup650 initially couldn’t reproduce the issue on Android Chrome but later tested extensively across 16+ themes on desktop, finding the icon consistently centered — except when manually adjusting the SVG width to 1.1em, which visually centered it. HamMan2118 confirmed the issue persists across different themes (Meta Branded, Central, Default) and also on two other Discourse communities (devsupport.flightsimulator.com and forums.goatsimulator3.com), both using custom or default dark themes. The issue appears device/browser-specific, as Firepup650 sees no misalignment on Android or desktop, while HamMan2118 consistently observes it on iOS Chrome. The root cause remains unclear, but it may relate to theme rendering, SVG scaling, or platform-specific CSS behavior. HamMan2118 plans further investigation.

1

Good evening!

Noticed when I receive a PM on another forum that the :email: icon is off center from the green background, slightly off to the right.
image

To ensure this was not specific to one forum, I tested it here too. Only this one is slightly off center to the left :squinting_face_with_tongue:

IMG_3699
IMG_3699220×180 15.4 KB

To repro:
1.) Send yourself (or receive) a PM
2.) notice the notification icon, with the envelope off-center.

This isn’t a very important issue but now I cannot unsee it :upside_down_face:

2

Just PM’d you here, can you reproduce it here on Meta? Also, what browser/device combo are you seeing this on?

3

Hello,

Yes, I tested here on meta as stated on the report:

REproed on Chrome, version 122.0.6261.69, as well as on iPhone 13 Pro running Safari.

4

Can’t reproduce, Chrome, Android 13, Samsung Galaxy A23

Screenshot_20240313_190229_Chrome
Screenshot_20240313_190229_Chrome344×118 12.6 KB

5

Is it perhaps specific to one theme? If you change to a different one, does it still occur?

1 Like
6

Results on different themes:

  • Meta Branded:
    image
  • Central:
    image
  • Default:
    image

Seems to be the case on all of the theme with the :email: as the icon for unread messages.

Could potentially see if others can repro as well.

7

My personal testing results:

  1. Regardless of theme I try on my phone, it is correctly aligned
  2. PC results:
    2.1. Accessible Contrast dark:
    image
    2.2. Air Theme:
    image
    2.3. Central:
    image
    2.4. Dark:
    image
    2.5. Default:
    image
    2.6. Default (full-width):
    image
    2.7. Discourse Classic:
    image
    2.8. Fully:
    image
    2.9. Ghost:
    image
    2.10. Graceful:
    image
    2.11. Grey Amber:
    image
    2.12. Material Design:
    image
    2.13. Meta Branded:
    image
    2.14. Minima Dark:
    image
    2.15. Redditish:
    image
    2.16. Sam’s Simple Theme:
    image
  3. If I adjust the width of the svg from 1em to 1.1em (manual CSS tweak), it looks centered on my PC:
    image
1 Like
8

Odd. I’ll do some further investigation later!

1 Like
11

Ok, I tested on two other discourse communities that I am a part in. Here are the results.

DevSupport uses the default Dark theme while the Goat Sim 3 forum uses a special theme. Both tested on iPhone 13 Pro, this time on Chrome for iOS.

So, it seems that default color scemes are causing this issue? Not sure though why @Firepup650 you cannot repro :thinking:

EDIT: Tested to see if the profile picture made a difference on goat sim 3 forum. Nope