Google Chrome 中大于 16777216 像素的内容未呈现答案

【问题标题】：Content in Google Chrome larger than 16777216 px not being renderedGoogle Chrome 中大于 16777216 像素的内容未呈现
【发布时间】：2016-08-11 20:50:45
【问题描述】：

我最近发现我在 google chrome 中的内容长度超过 16777216px 时没有被渲染。

jsfiddle

完整的 HTML：

<html>
<head>
<style>
#content {
    height: 16777316px;
    position: relative;
    font-size: 2em;
    font-weight: 700;
}
#semi-hidden {
    position: absolute;
    bottom: 0;
    background-color: #000000;
    color: #ffffff;
    height: 200px;
    width: 50%;
    float: left;
}
#hidden {
    position: absolute;
    bottom: 0;
    background-color: #ffffff;
    color: #000000;
    height: 100px;
    width: 50%;
    float: right;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
<div id="content">Scroll Down &darr;
  <div id="semi-hidden"> The Bottom 100px of this DIV is not rendered. </div>
  <div id="hidden"> This DIV is completly hidden. </div>
</div>
</body>
</html>

编辑：这是由于 Google Chrome 不支持大于 16777216 像素的布局。

【问题讨论】：

也许是因为那太长了？在超过四英里长的 60dpi 显示器上
请注意，您发现的数字可疑地接近 16,777,216，即 2²⁴。

标签： javascript jquery html css google-chrome

【解决方案1】：

Google Chrome 使用 LayoutUnits 表示布局的元素位置，它可以表示有符号 int 空间的 1/64（2^31 / 64 个整数值，或 +/-16777216）。

Google Chrome 无意在不久的将来支持更大的值。

Bug Report

【讨论】：