새로운 PM 알림 아이콘에서 봉투가 어긋남

기여 UX
1

저녁 인사드립니다!

다른 포럼에서 개인 메시지를 받을 때 :email: 아이콘이 녹색 배경에서 약간 오른쪽으로 치우쳐 있는 것을 발견했습니다.
image

이것이 특정 포럼에서만 발생하는 문제인지 확인하기 위해 여기서도 테스트해 보았습니다. 여기서는 약간 왼쪽으로 치우쳐 있네요 :squinting_face_with_tongue:

IMG_3699
IMG_3699220×180 15.4 KB

재현 방법:
1.) 자신에게 (또는 다른 사람으로부터) 개인 메시지를 보내기/받기
2.) 봉투 아이콘이 중앙에서 벗어나 있는 알림 아이콘을 확인하기

매우 중요한 문제는 아니지만, 이제 이 부분을 무시할 수 없게 되었습니다 :upside_down_face:

2

여기서 DM을 보냈는데, Meta에서도 재현해 볼 수 있을까요? 그리고 어떤 브라우저/기기 조합에서 이 문제가 나타나요?

3

안녕하세요,

리포트에 명시된 대로 메타에서 직접 테스트를 수행했습니다:

Chrome 122.0.6261.69 버전 및 Safari가 설치된 iPhone 13 Pro에서도 재현되었습니다.

4

재현 불가, Chrome, Android 13, Samsung Galaxy A23

Screenshot_20240313_190229_Chrome
Screenshot_20240313_190229_Chrome344×118 12.6 KB

5

혹시 특정 테마에만 해당하는 문제인가요? 다른 테마로 변경하면에도 여전히 발생하나요?

1개의 좋아요
6

테마별 결과:

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

모든 테마에서 읽지 않은 메시지 아이콘으로 :email: 이 사용되는 것으로 보입니다.

다른 사용자들도 동일한 현상을 재현할 수 있는지 확인해 볼 수 있을 것 같습니다.

7

개인 테스트 결과:

  1. 휴대폰에서 어떤 테마를 시도하든 올바르게 정렬됩니다.
  2. PC 결과:
    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. svg의 폭을 1em에서 1.1em으로 조정하면(수동 CSS 조정), 제 PC에서는 중앙 정렬되어 보입니다:
    image
1개의 좋아요
8

이상하네. 나중에 좀 더 조사해 볼게!

1개의 좋아요
11

네, 제가 소속되어 있는 다른 두 디스코urse 커뮤니티에서도 테스트해 보았습니다. 결과는 다음과 같습니다.

DevSupport는 기본 Dark 테마를 사용하는 반면, Goat Sim 3 포럼은 특수 테마를 사용하고 있습니다. 이번에는 iPhone 13 Pro에서 iOS용 Chrome으로 테스트했습니다.

따라서 기본 색상 스킴이 이 문제를 일으키는 것 같습니다. 다만 @Firepup650 님이 재현하지 못하는 이유는 확실하지 않네요 :thinking:

수정: Goat Sim 3 포럼에서 프로필 사진이 차이를 만드는지 확인해 보았습니다. 아니었습니다.