不会在 Chrome 中显示超过 999 行

Question

由于某种原因，在 Chrome 中，一旦打印了 999 行，元素就会开始相互重叠。它在 Firefox 中运行良好。我使用的 Chrome 版本是 70.0.3538.102 (Official Build) (64-bit)，今天早些时候刚刚发布。

页面按字母顺序排序，我在任何其他页面上都没有遇到此问题，因为“A”页面是唯一超过 999 行的页面。

#data {
  display: grid;
  grid-template-columns: repeat(8, max-content);
  grid-template-rows: auto;
}

<section id="data">
   ...
  <div>1000</div><div>axelle</div><div>G</div><div>92,296</div><div>2018-11-09</div><div>NULL</div><div>0</div><div>2018-11-09 07:49:36</div><div>1001</div><div>axes</div><div>G</div><div>88,536</div><div>2018-11-09</div><div>NULL</div><div>0</div><div>2018-11-09 07:49:36</div><div>1002</div><div>axethrowing</div><div>G</div><div>138,823</div><div>2018-11-09</div><div>NULL</div><div>0</div><div>2018-11-09 07:49:36</div><div>1003</div><div>axial</div><div>G</div><div>395,943</div><div>2018-11-09</div><div>NULL</div><div>0</div><div>2018-11-09 07:49:36</div><div>1004</div><div>axialracing</div><div>G</div><div>165,508</div><div>2018-11-09</div><div>NULL</div><div>0</div><div>2018-11-09 07:49:36</div><div>1005</div><div>axilas</div><div>G</div><div>87,736</div><div>2018-11-09</div><div>NULL</div><div>0</div><div>2018-11-09 07:49:36</div><div>1006</div><div>axiom</div><div>G</div><div>110,834</div><div>2018-11-09</div><div>NULL</div><div>0</div><div>2018-11-09 07:49:36</div><div>1007</div><div>axioo</div><div>G</div><div>321,874</div><div>2018-11-09</div><div>NULL</div><div>0</div><div>2018-11-09 07:49:36</div>
   ...
</section>

这是 Chrome 的错误还是？

Answer 1

CSS 网格规范为处理超大网格做出了明确规定：

由于内存有限，UA 可能会将网格的可能大小限制在 UA 定义的限制内，将所有超出该限制的行删除。如果一个网格项被放置在这个限制之外，它的网格区域必须被限制在这个限制的网格内。

(https://www.w3.org/TR/css-grid-1/#overlarge-grids)

规范继续给出一个示例，其中涉及一个假设的 UA，其网格大小限制为 1000，暗示这是一个典型的限制。

这不是 CSS 网格功能的合适应用程序。使用 HTML 表格——这正是它们的用途。