Why do elements with the same height "look" differently when zoom changes?

Question

Basically the gist is in the subject.

When I create two identical divs with fixed height (2px), and change the zoom to 75% or 125%, they "look" differently for some reason, can someone please explain what is going on here? And how do I fix this?

.gradient-slider-line {
    background: linear-gradient(to right, red , blue);
    height: 2px;
}

<div>
<div class="gradient-slider-line"></div>
</div>
<br/>
<div>
<div class="gradient-slider-line"></div>
</div>

Result:

Answer 1

ok, some research helped but not a complete solution. As the last comment mentioned, it's a subpixel rendering issue, and it's influenced by your Anti Aliasing settings and windows display scaling setting. I switched to a 0.15 rem instead of 2px, which produced a similar line but the increments at which the line height jumps when zooming in/out are smaller and visually it's much less noticeable.