连续的 █ 字符在 HTML 中产生彩色线条

Question

当我发现这个结果时，我正在尝试一些事情：

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>

你应该看到一些白色的垂直线以及填充 div 的 █ 字符；这是由 char 本身的一点空间造成的。

但更有趣的是，如果我在JSBin 或普通页面中尝试此操作，线条似乎是彩色的，看起来像是彩虹般的调色板。

我想知道是什么导致了这种行为（我并不是想实现特定的目标；我只是想知道为什么会发生这种情况）。

Answer 1

我会有一个疯狂的猜测，并说它是特定于浏览器的着色器。如果放大和缩小颜色会发生变化，因此似乎像素太少而无法正确显示白线。实际上，着色器希望在一个像素中同时显示多个东西，混合了白色和黑色，这显然会根据屏幕上的位置提供不同的颜色？

或者它甚至是故意的，有人认为这种混合相邻像素颜色以平滑所有内容的着色器看起来更好。

编辑： 总结一些 cmets，这似乎取决于您使用的浏览器以及您的硬件/系统，因为每个人似乎在不同的浏览器上得到不同的结果。在浏览器中进行缩放也会产生不同的结果，对我来说，在 Firefox 中，有白色的水平线，但在某些缩放级别上也会出现垂直的彩虹线。