Chrome 66渲染bug：高20000px的div被截断，如何修复？

嘿，这个坑我之前踩过！Chrome 66这类早期版本确实存在单个元素高度的渲染上限，大概就是16384px（刚好是2的14次方），这是Blink引擎底层的硬限制——不是div数量的问题，是单个元素的高度超过这个值后，超出部分就会停止渲染，显示为空。而Safari的WebKit引擎在这方面限制更宽松，所以能正常渲染全部内容。

下面给你几个可行的修复方案：

• 拆分超长div为多个小元素
  把原来20000px的单个div拆分成多个高度不超过16000px的子div，每个子div继承原长div的样式。比如：

  <!-- 原代码 -->
  <div class="long-div"></div>
  
  <!-- 修改后 -->
  <div class="section-div"></div>
  <div class="section-div"></div>
  

  CSS里给.section-div设置合适的高度（比如各10000px），保持和原.long-div一致的视觉样式即可，这样Chrome就能分别渲染每个小div了。

• 改用滚动容器包裹内容
  如果你的长内容是需要滚动查看的，不如把它放进一个固定高度的容器里，开启垂直滚动。这样容器本身高度不会触发Chrome的限制，内部内容能完整渲染，用户通过滚动查看全部内容：

  .scroll-wrapper {
    height: 700px; /* 设置你需要的可视区域高度 */
    overflow-y: auto;
    /* 可选：隐藏滚动条美化样式 */
    scrollbar-width: thin;
  }
  

  把超长内容放在这个.scroll-wrapper容器内即可。

• 升级Chrome版本（如果条件允许）
  后续Chrome版本已经逐步提高了这个高度限制（比如新版本上限到32768px甚至更高），如果你的用户群体可以升级浏览器，这也是一劳永逸的解决办法。不过前两个方案更适合需要兼容老版本的场景。

内容的提问来源于stack exchange，提问作者Andre Song