Why does same size elements show different when zoom? - html

Question

Here are two pseudo element before and after on same element. Both have 1px width. When I change the zoom of browser at some points it seems that their width is different.
.main::after,
.main::before {
content: "";
position: absolute;
height: 17px;
width: 1px;
background-color: orange;
top: 50%;
transform: translate(-50%, -50%);
}
.main::after {
left: 70%;
}
.main::before {
left: 30%;
}
.main{
position: relative;
padding:30px;
width: 12px;
}
<div class="main"></div>
You will be able to notice the issue by changing the browser zoom.

Answer 1

Yes, this is a well known phenomenon.
It comes about because the system is trying to match one CSS pixel onto a screen which uses several screen pixels to hold one CSS pixel.
This can lead to edge effects (sort of like rounding errors) when the user zooms in or out. At certain zoom levels it can match a whole number of pixels, but at others it has to decide whether to leave out (or include) some screen pixels.
If you make your bar have 2px (CSS) width then at least on my system while I do see the phenomenon at 90% and 110% zoom I don't see it on others.
.main::after,
.main::before {
content: "";
position: absolute;
height: 17px;
width: 2px;
background-color: orange;
top: 50%;
transform: translate(-50%, -50%);
}
.main::after {
left: 70%;
}
.main::before {
left: 30%;
}
.main{
position: relative;
padding:30px;
width: 12px;
}
<div class="main"></div>