Полоска в 0.5px

Никогда не думал, что банально нарисовать полоску в браузере может быть так сложно.

Вот эти серые полоски

Казалось бы, берем элемент, hr, например. И добавляем border-bottom:

border-bottom: 1px solid #f0f0f0;

Все было бы классно, если бы не Safari. Safari отображает эту полоску шириной 1–2px.

Окей, нет проблем. Сделаем используя background-color:

background-color: #f0f0f0;
height: 0.5px;

Теперь в Safari все отлично.

Открываем Chrome и видим, что полоски рисуются через одну. Я так понимаю он так интерполирует цвета пикселей и те которые находятся на границе не рисуются.

Решение:

background-color: #f0f0f0;
height: 1px;
transform: scaleY(0.5);

Во всех браузерах теперь все отлично. Как можно понять при transform браузер обязан прорисовать все пиксели.