Блог

У меня проблема с небольшими значениями пикселей в CSS. Когда мне нужны 1..2..3 пикселя (другими словами, небольшие) значения границы, поля и т. Д. Поведение браузера нестабильно, и я иногда вижу элементы, которые имеют одинаковые параметры в CSS, которые выглядят по-разному.

Например, я добавил :before псевдоэлементы, чтобы показать две вертикальные серые линии, и это начальный CSS:

  amp;:before {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 2px;
            height: 100%;
            background-color: $color_white;
            opacity: .6;
            mix-blend-mode: soft-light;
          }
 

Итак, в моем последнем хроме это выглядит так:

Как вы можете видеть, вертикальные границы имеют разную ширину 2 пикселя. Более того, когда я увеличиваю его, ширина левой вертикальной границы может выглядеть больше, чем ширина, и наоборот.

Но я решил эту проблему, установив ширину 1,5 пикселя width: 1.5px , и теперь она отлично смотрится и при масштабировании:

Что происходит? Почему я плохо вижу элементы, когда целочисленные значения 1-2-3px и изменение их на дробные (иногда до 1,7 пикселя 1,8 пикселя и так далее) Решает проблему? Как исправить это хорошим способом?