用svg滚动修复移动设备上的后台bug

Question

在我的HTML页面中，我在后台使用Snapsvg创建了一个SVG动画。我正在使用视差效果，我正在使用window.pageYOffset获得滚动位置。某些内容需要花费时间来加载某些背景颜色

在我的笔记本电脑上一切正常，这是截图：

问题在于，当我在Android手机或iPhone上滚动时，我得到了这个：

我在一些论坛中发现，滚动时使用监听事件会导致此问题。

这是我的CSS：

.banner {
 text-align: center;
 position: relative;
 margin: auto;
}

svg {
 width: 100%;
 height: 854px;
 margin-top: 0px;
 position: absolute;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
}

#svg{
 position: fixed;
 z-index: -1;
 height: 1000px;
}

HTML代码：

<section class="banner">
   <svg id="svg"></svg>
   <svg id="animation"></svg>
</section>