Contiguous █ character produces colored line in HTML

Question

I was trying some things when I found this result:

let s = "";
for (let y = 0; y < 224; y++) {
  for (let x = 0; x < 361; x++) {
    s += '█';
  }
  s += "\n"
}
document.getElementById('r').innerText = s;

#r {
  width: 1024px;
  height: 896px;
  font-size: 4px;
}

<div id="r">
</div>

You should see some white vertical lines along with the █ character which fills the div; this is caused by a little space in the char itself.

But more interesting, if I try this in JSBin or in a plain page, the lines appear to be colored, with what appears to be a rainbow-like palette.

I would like to know what causes this behaviour (I'm not trying to achieve something specific; I just would like to know why this happens).

Answer 1

I gonna have a wild guess and say its a browser specific shader thing. If you zoom in and out the colors change, so it seems that there are too few pixels to correctly show the white line. Practically the shader wants to display multiple things at the same time in one pixel, a mix of white and black, which apparently gives a different color depenting on the position on the screen?

Or maybe its even on purpose and someone thought such a shader that mixes colors of adjacent pixels to smooth everything looks better.

EDIT: To sum up some comments, it seems that this depends on the browser your using as well as on your hardware/system, as everybody seems to get different results on different browsers. Playing around with the zoom in the browser also yields different results, for me, in Firefox, there are white horizontal lines, but on some zoom levels the vertical rainbow lines appear, too.