Смещение пикселей на кнопке CSS в Windows с масштабированием 125 % (без влияния на масштаб пользователя) ⇐ CSS

[Anonymous]

Я столкнулся с проблемой смещения пикселей при отрисовке кнопок CSS при определенных разрешениях экрана. На ноутбуке с масштабом экрана по умолчанию 125 % в Windows некоторые элементы кнопки не выровнены должным образом, что приводит к небольшому смещению между элементами в 1 пиксель.
Я разработал кнопка с несколькими линиями (с использованием элементов), расположенными абсолютно, но в зависимости от масштабирования дисплея линии иногда отображаются с разной толщиной (3 пикселя против 4 пикселей). Похоже, проблема связана с масштабированием отображения в Windows, но я не могу найти решение CSS, которое исправляет ее, не влияя на внешний вид сайта и не заставляя пользователя изменять масштаб отображения (увеличение).

Код: Выделить всё

$(document).on('click', 'header button.container_btn_contact', function() {
console.log('test contact');
el = $(this);
el.toggleClass('active');
if ($(document).find('header div.container_menu_contact div.container_sign img').length <  1) {
url_sign = $(document).find('header div.container_menu_contact div.container_sign').attr('data-src');
class_sign = $(document).find('header div.container_menu_contact div.container_sign').attr('data-class');
alt_sign = $(document).find('header div.container_menu_contact div.container_sign').attr('data-alt');
title_sign = $(document).find('header div.container_menu_contact div.container_sign').attr('data-title');
$(document).find('header div.container_menu_contact div.container_sign').append('
[img]https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js[/img]

Любые предложения по решению этой проблемы без изменения общего масштаба или отображения масштабирование сайта? Будем очень признательны за любую помощь или идеи!
Проблема:
В определенных разрешениях линии имеют неравномерную толщину: некоторые имеют толщину 3 пикселя, а другие составляют 4 пикселя.
Проблема возникает только в том случае, если масштаб экрана в Windows (ноутбук) установлен на 125%.
Я не хочу влиять на масштабирование пользователей или уменьшать уровень масштабирования сайт.
Что я пробовал:
Добавление свойств CSS, таких как Transform, Will-Change и TranslateZ(0), для более точного рендеринга, но это не решило проблему. проблема со смещением.
Играл с абсолютными и относительными размерами в CSS (например, с помощью Calc(), devicePixelRatio и т. д.), но смещение не исправилось.

Подробнее здесь: https://stackoverflow.com/questions/793 ... ecting-use