Javascript HTML5滚动背景

我正在制作一个html5“网络游戏风格”，我有一个大约7600px的大宽度背景。使用css背景大小设置背景：在宽度为400vw的div中为100%100%。我正在尝试使用requestAnimationFrame循环中的window.scrollBy函数在该背景上滚动。Ramdomly当页面自动滚动时，背景会出现图形故障，但渲染时间线（Chrome）在绘画中显示的时间少于2毫秒

dpl = -window.innerWidth*duration;
    if(next != null){
        function move(){
            if(window.pageXOffset > next.x){
                window.scrollBy(dpl,0);
                window.requestAnimationFrame(move);
            }else{
                window.scrollTo(next.x,next.y);
                actual = next;
                next = null;
            }
        };
        move();
            //Interval callback
            /*interval = setInterval(function(){
            if(window.pageXOffset > next.x){
                window.scrollBy(dpl,0);
            }else{
                window.scrollTo(next.x,next.y);
                actual = next;
                next = null;
                clearInterval(interval);
            }
        },scrollInterval);*/
    }

我还尝试更改scrollBy函数，并使用css转换和触发的transition来更改更改translate3d属性的元素的类，以尝试强制gpu..同样的结果

.camLeft{
-ms-transform: translate3d(0,-100%,0) !important; 
 -webkit-transform: translate3d(0,-100%,0) !important;
transform: translate3d(0,-100%,0) !important;
}

并使用：

$(".btnLeft").click(function(){
   $("#background").toggleClass("camLeft");
});

另一次尝试是使用画布。。再次使用requestAnimationFrame循环并滚动背景，清除每一帧画布并重新绘制背景..（画布在窗口加载时设置为100%/100%，图像设置为400%/100%），同样的结果。喷漆时间小于2ms，有时为4-5ms，但随机出现图形故障

我不知道还能做什么，除了试着用瓷砖或图片来制作背景——这将是一项艰巨的工作。当背景移动到屏幕的大部分区域时，屏幕会被“损坏”，所以请使用tiles dunno确定这是否是解决方案，因为滚动时需要移动大量的tiles

注意：背景是用svg制作的，也尝试了png，它有更多的浮华。它是一个基本的地板背景，有很多曲线，像2D平台游戏

非常感谢你的帮助