Translate3D导致浏览器跳转（多层）

Question

我有一个容器，其中包含与以下内容类似的子项....

 <div id="content">
   <section id="svg-city">
      <svg ...>
   </section>
   <section id="svg-water">
     <svg ...>
   </section>
 </div>

使用以下SCSS

#content {
  height: 100%;
  width: 100%;
  transform-style: preserve-3d;
  transition:5s transform linear;
  transform:translate3d(0px, 0px, 0px);
  will-change: transform;

  &.phase-1 {
    transform:translate3d(0px, 0px, -1500px);
  }
}
#svg-city {
  svg {
    width: 2000px;
    transform:translate3d(0%, -165px, -800px);
  }
}
#svg-water {
  svg {
    width:8000px;
    left:50%;
    transform:translate3d(-50%, 350px, -800px);  
  }
}

我的想法是，当我将类.phase-1添加到内容容器时，整个屏幕会缩小，显示3d景观。这可以在我桌面屏幕上的Chrome中顺利运行，但是如果我将它拉到我的笔记本电脑上，那么场景会开始变得生涩和跳跃。此外，当我添加更多.svg元素时，场景会在所有浏览器中展示此行为。

有没有办法更好地处理过渡/翻译以显示类似于（https://codepen.io/nickpettit/full/eBCrK）的场景