css - 实心渐变不是真的实心？在色标处不要有清晰的边缘

Question

在 CSS 中，这似乎是创建纯色渐变的最简单方法，其中颜色在颜色停止处突然结束和开始。示例 -

background-image:linear-gradient(to bottom, gray 100px, white 0);/*让浏览器决定*/

或

background-image:linear-gradient(to bottom, gray 100px, white 100px);/*明确指定。*/

发生的情况是生成了渐变，但在颜色相遇的地方并没有真正清晰的边缘。我的假设是代码会导致灰色在 100px 处停止，而白色紧随其后。

但结果还是有点模糊。我在下面整理了一个示例(将其视为整页)。在灰色和白色相交的屏幕中央，您可以看到差异。

• 为什么会这样？是因为浏览器需要做的计算吗？
• 有什么方法可以在颜色相遇的地方获得绝对清晰的边缘？

编辑 - 即使是像素值也不是很好。

* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}
html,
body {
  height: 100%;
}
body {
  background: linear-gradient(to bottom, #999 10em, white 0)
}
.container {
  width: 50%;
  height: 100%;
}
.gradient {
  background: #999;
  height: 10em;
}

<div class="container">
  <div class="gradient"></div>
</div>

Answer 1

正如@Mr Lister 在评论中提到的，看起来像是 Chrome 的一个错误。找个 Mac 机器看看 safari 是不是也一样。这样我就可以为两者提出错误。