HTML/CSS markup: irregular, asymmetrical lines drawn with DIV blocks on a HiPPI monitor

Question

TLDR: same lines drawn with the div element look different at different scales and sizes of the browser window. This is the example: imgur, jsfiddle.

I drew some horizontal, vertical and diagonal lines using DIV blocks. With different browser window sizes, different scales, different content above and below the drawn blocks, these blocks (with the same thickness) look different (some are thinner, others are wider). Conversely, blocks with different thicknesses may look the same in some moments.

These pictures demonstate how a part of my schema looks in different situations.

On a monitor with a normal pixel density and with system scale = 100% this problem is less noticeable or not showing itself at all.

I saw a similar problem earlier when I added narrow (1-2px) div elements as horizontal dividers. Some of them sometimes were disappeared (they were invisible) when others behaved as usual on the same page, if all of them were visible, some of them were thicker than others. This behavior for each element changes even I open/close Chrome developer tools panel or drag a corner of browser window.

I tried to replace div lines with svg elements, but they also demonstate strange behavior.

Can I make all elements resize the same? I would not want to replace each such element with a bitmap image.

A similar problem was described in this (not solved) question (if you can't see the problem, just zoom the result window in jsfiddle.

I cant catch the problem in other sites, for example, on Wikipedia, all horizontal lines (under h2 elements, left menu dividers) look the same at any scale. At stackoverflow there are comment horizontal dividers (narrow gray lines between comments), they are also look great.

This (imgur, jsfiddle) minimal examlpe demonstrates the different line scaling at 90, 100 and 110%. I noticed a strange feature. If I use a border to draw lines instead of the background-color, then these lines look much better. This method used at stackoverflow and wikipedia sites (Wiki also uses png at the left menu).

This is the minimal reproducible example, built in Stack Snippets:

.line {
  background-color: pink;
  /*  border-bottom: 1px solid pink; */
  margin: 20px auto;
  width: 80%;
  height: 1px;
}

<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>

Answer 1

This is just how different browsers solve for fractions at different zoom sizes. You can't have part of a pixel on your screen.

For example, let's say you have three divs stacked on top of each other, each 2px high. Zoom in to 120% and each div would now be 2.2px high. Since the browser can't actually render that, it might round the first div to 2px high. The second div might have a top of 2px and also be 2px high.

However, the third div should technically be 4.4px from the top, but its bottom should be 6.6px from the top. If the browser is rounding to the nearest whole number, you could see how it might compute the top of the third div at 4px and the bottom at 7px, giving it a height of 3px, instead of 2px.

I'm not saying that's exactly what's going on - each browser uses slightly different calculations when it comes to painting - but hopefully that helps illustrate the point. It sounds like you're having better luck with border so that might be your best approach.

Here's a similar question