CSS, высота меняет цвет границы

Question

Иногда CSS действует странно в chrome, разница между двумя divами заключается только в параметре высоты, но в результате: цвет границы отличается.

body {
background: black;
}

#div1 {
    border: 1px solid white;
    height: 41px;
    width: 100px;
    transform: rotateZ(270deg);
    transform-origin: right;
}

#div2 {
    border: 1px solid white;
    height: 40px;
    width: 100px;
    transform: rotateZ(270deg);
    transform-origin: right;
}

<div id="div1">

</div>

<br><br><br><br><br><br>

<div id="div2">

</div>

PS: я работаю в Chrome с увеличением 100%

результат:

Answer 1

На самом деле это проблема сглаживания.Граница в 1 пиксель находится между двумя пикселями, в результате чего получается серый цвет.

Чтобы визуализировать это, я сделал для вас снимок экрана, увеличил его и наложил на него сетку:

Помните об этом при преобразовании объектов.