Chromium浏览器大型背景元素3D CSS变换致滚动溢出问题

我正在开发一个利用CSS transform3D特性的网站，通过硬件加速的3D变换（如透视、缩放）在3D空间中定位div。参考Keith Clark的《Pure CSS Parallax Websites》指南及Daily Fire的Medium文章，修改技术实现了全屏多层背景图的视差效果，该效果已在个人网站上线。

目前遇到的问题：这些大型背景元素在Chrome浏览器中会导致页面可滚动至主内容边界之外，Firefox和Safari可正常渲染，Chrome未正确遵循overflow设置。

浏览器渲染效果对比 #

• Chrome截图：
• Safari截图：

代码示例 #

HTML结构 #

<body>
  <div class="bgcontainer">
    <!--尝试删除bgcontainer-->
    <div class="bglayer bg1"></div>
    <div class="bglayer bg2"></div>
    <div class="bglayer bg3"></div>
  </div>
  <div class="content"></div>
</body>

CSS样式 #

/* 格式化与视差相关样式 */
html, body {
  background: #000;
  height: 100vh;
  margin: 0;
  overflow: hidden scroll; /* (x y) */
  padding: 0;
  perspective: 1px; /* 定义3D效果强度 */
  transform-style: preserve-3d; /* 告知浏览器以3D方式渲染页面 */
  width: 100vw;
}
.content {
  /* 若需绕过删除bgcontainer的问题，可取消注释以下行 */
  /*margin-top: 80vh;*/
  background: #111C;
  border: yellow 2px solid;
  height: 1600px;
  transform: translateZ(0px);
  width: 100%;
}

/* 背景元素样式 */
.bgcontainer {
  /* 若将视差元素放在父容器中，Chrome会异常渲染页面，此为问题所在 */
  height: 80vh;
  transform-style: preserve-3d;
  width: 100vw;
}
.bglayer {
  bottom: 0px;
  display: block;
  left: 0px;
  position: fixed; /* 若设为absolute会破坏WebKit渲染 */
  right: 0px;
  top: 0px;
}
.bg1 {
  background-color: red;
  width: 95%;
  height: 95%;
  transform: scale(21) translateZ(-20px);
  /* translateZ & translate3D可定义图层深度 */
  /* 需缩放以抵消透视效果 */
}
.bg2 {
  background-color: blue;
  width: 75%;
  height: 75%;
  transform: scale(11) translateZ(-10px);
}
.bg3 {
  background-color: green;
  width: 65%;
  height: 65%;
  transform: scale(6) translateZ(-5px);
}

我制作了一个简化版演示，展示可滚动文档中，背景容器包含3个不同颜色的block div图层，通过不同z值偏移营造3D深度，该视差效果对我的设计目标至关重要。

希望能帮忙分析问题原因并提供解决方案。

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