Как сделать так, чтобы граница в 1 пиксель всегда отображалась независимо от того, насколько сильно пользователь увеличил Chrome (или любой браузер)?

Question

Я знаю, что это субпиксельный расчет, и я прочитал два других SO относительно этого ( 1, 2), однако, мне интересно, есть ли элегантное решение специально для этой ситуации без изменения спецификации (потому что я знаю, если я добавлю дополнительные отступы) вокруг родительского контейнера это избежит). https://codepen.io/adamchenwei/pen/GxKZpd Если поле имеет границу шириной в 1 пиксель, а цвет фона эффекта наведения каким-то образом перекрывает саму границу, когда пользователь увеличивает масштаб на 50% * ПРИМЕЧАНИЕ. Я понимаю, что фактический компонент I я работаю над ним, он исчезает, когда я увеличиваю примерно на 75%, поэтому попробуйте различный процент при наведении курсора на каждый элемент, чтобы увидеть, когда границы справа и снизу исчезают при определенном уровне масштабирования, НЕ ВСЕ УРОВЕНЬ МАСШТАБИРОВАНИЯ будет наблюдать это!

Рабочая станция:

Я работаю над Macbook Pro 15,4 дюйма с последней версией браузера Chrome.

CSS

.container {
  border-width: 1px;
  border-color: lightgray;
  border-style: solid;
}

.aaa {
  &:hover {
    background-color: beige;
  }
}

HTML

<div class='container'>
  <div class='aaa'>abc</div>
  <div class='aaa'>abc</div>
  <div class='aaa'>abc</div>
</div>

Answer 1

Единственное решение, которое я нашел (см. Здесь), которое не меняет HTML, - это использовать "thin" вместо "1px" в CSS. Похоже, надежно сделать границы 1px.

Кроме того, мне не удалось воспроизвести проблему с помощью кодового маркера, которым вы поделились, поэтому на случай, если будущий разработчик увидит это и захочет повторить проблему, этот сайт постоянно выдает ошибку (для меня) при уменьшении масштаба.