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

Давайте разбираться... Посмотрим на пример такой проблемы:

На изображении видно, что граница ① кажется толщиной 2px, а границы ② имеют толщину 1px. В настройках контейнера толщина границ установлена 1px для всех сторон. Если мы попробуем изменять размер контейнера, то проблема становится более заметна и выдает непредсказуемые результаты: толщина границы то больше, то как должна быть:

В чем же причина и как исправить эту проблему?

Спойлер: проблема в настройках Windows Display Settings → Scale and Layout установленных в 125%. Но обо всем по порядку...

Масштабирование в Windows

C появлением дисплеев с высокой плотностью пикселей возникла необходимость в масштабировании пользовательского интерфейса операционных систем, потому что с увеличением разрешения дисплеев интерфейс визуально становился мельче. Для этого в OC Windows была добавлена функция масштабирования, которая по умолчанию установлена в рекомендованное значение 125%.

Что физически происходит с изображением на экране дисплея при масштабировании в 125% ?

Каждый пиксель изображения масштабируется на 125%. Иными словами становится шириной не 1px , а 1.25px, а это означает, что изображение не будет ровно попадать (закрашивать) физический пиксель на экране дисплея. Поэтому на некоторых дисплеях границы кажутся размытыми, а на некоторых «размытость» компенсируется операционной системой, путем округления дробной части до целой – таким образом получаем увеличенную толщину границы.

По нашему мнению, в операционной системе Windows, масштабирование реализовано не совсем корректно по умолчанию. Оно негативно влияет на пользовательский контент.

Как с этим жить и что делать?

Если вам важно правильное отображение контента, можно попробовать следующие варианты:

  • Установите масштабирование в 100%, тогда каждый пиксель изображения, будет соответствовать физическому пикселю дисплея. Но к сожалению придется привыкнуть к уменьшенному интерфейсу операционной системы.

  • Попробуйте включить опцию «Let Windows try to fix apps so they're not blurry» в дополнительных настройках «Advanced scaling settings»:

  • Постарайтесь не обращать внимание на это искажение. Помните, что в действительности его нет и получатели вашей рассылки увидят правильные границы у элементов письма.

Если у вас возникли вопросы, пожалуйста, напишите нам support@stripo.email

Вы нашли ответ?