Невыровненный конверт в иконке нового уведомления PM

Внести вклад UX
1

Добрый вечер!

Я заметил, что при получении личного сообщения на другом форуме иконка :email: смещена относительно зелёного фона — немного вправо.
image

Чтобы убедиться, что это не особенность одного форума, я проверил и здесь. Только здесь иконка смещена немного влево :squinting_face_with_tongue:

IMG_3699
IMG_3699220×180 15.4 KB

Повторение:
1.) Отправьте себе (или получите) личное сообщение.
2.) Обратите внимание на иконку уведомления — конверт смещён.

Это не очень важная проблема, но теперь я не могу перестать это замечать :upside_down_face:

2

Только что отправил тебе личное сообщение здесь. Можешь воспроизвести это здесь, на Meta? Также, на какой комбинации браузера и устройства ты это видишь?

3

Здравствуйте,

Да, я проверил это здесь на Meta, как указано в отчёте:

Проблема воспроизведена в Chrome версии 122.0.6261.69, а также на iPhone 13 Pro с Safari.

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. Результаты на ПК:
    2.1. Доступный контраст (тёмная тема):
    image
    2.2. Тема Air:
    image
    2.3. Центральная:
    image
    2.4. Тёмная:
    image
    2.5. По умолчанию:
    image
    2.6. По умолчанию (на всю ширину):
    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. Простая тема от Сэма:
    image
  3. Если я изменю ширину SVG с 1em на 1.1em (ручная правка CSS), на моём ПК она выглядит отцентрированной:
    image
1 лайк
8

Странно. Позже я проведу дополнительное расследование!

1 лайк
11

Хорошо, я протестировал это на двух других сообществах Discourse, в которых я участвую. Вот результаты.

DevSupport использует тему Dark по умолчанию, а форум Goat Sim 3 — специальную тему. Тестирование проводилось на iPhone 13 Pro, на этот раз в Chrome для iOS.

Похоже, что проблема возникает из-за цветовых схем по умолчанию? Хотя не совсем понятно, почему у @Firepup650 не удаётся воспроизвести это :thinking:

РЕДАКТИРОВАНИЕ: Проверил, влияет ли изображение профиля на форуме Goat Sim 3. Нет.