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

[Anonymous]

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

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

CSS:

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

header div.container_header div.header button.container_btn_menu div.btn_menu {
position: relative;
width: 17px;
height: 15px;
cursor: pointer;
opacity: 1;
transition: all ease-in-out .25s;
}
header div.container_header div.header button.container_btn_menu div.btn_menu span {
position: absolute;
left: 0;
width: 17px;
height: 3px;
background: #000;
background: var(--black);
}
header div.container_header div.header button.container_btn_menu div.btn_menu span:nth-child(1) {
top: 0;
}
header div.container_header div.header button.container_btn_menu div.btn_menu span:nth-child(2) {
top: 6px;
}
header div.container_header div.header button.container_btn_menu div.btn_menu span:nth-child(3) {
top: 12px;
}

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

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