Javascript 滚动背景过渡在Chrome和IE上产生涟漪效应

我目前正在进行一个新的网站建设，目前位于。作为网站设计的一部分，我实现了一个简单的backbone.js视图，它以与其他内容不同的速度滚动背景，以创建透视错觉

weve.ScrollTransitionView = Backbone.View.extend({
    templateId: 'template-page-background',
    className: 'page-background',   

    initialize: function () {
        var scope = this;

        var factor = 1.3;

        jQuery(window).scroll(function (e) {
            var scrollTop = jQuery(this).scrollTop();
            var position = 'top ' + (scrollTop / factor) + 'px center';
            scope.$el.css({ 'background-position': position });
        });
    }
});

这在Firefox中运行良好。然而，在Chrome中，滚动时会产生涟漪效应——背景似乎只在某些地方渲染，图像的某些部分渲染不到位——也就是说，效果是不稳定的

起初我认为这可能是页面上扭曲元素的问题，但在使用部分透明的图像而不是CSS扭曲的DOM元素创建模型后，我遇到了同样的问题

另外，当页面上只有几个元素时，模型看起来很好，但当我将其翻译到页面上有更多文本/图像/元素的站点时，呈现问题仍然存在

我在这个论坛和其他论坛上都找到了相关渲染问题的提示，但似乎没有什么与我遇到的问题相匹配

---

有人能帮忙吗？

我终于找到了解决办法。这个问题（对我来说）与Chrome渲染引擎的工作方式有关（请参阅：）

本质上，我的页面的前景被划分为一系列包含转换（倾斜）元素的部分。尽管截面本身显示为对角线，但渲染引擎将其视为在相对角上具有三角形透明区域的正方形。当背景移动时，这些部分没有被改变——这意味着渲染引擎为了更快更高效，没有使用新的背景位置正确地重新渲染透明部分，从而产生抖动效果

---

解决方案是在我的视差javascript中添加一行代码，以便在每次背景改变时微妙地修改每个转换部分的css。我将脚本设置为调整视差代码每个循环上div元素的背景，在两种颜色之间交替-rgba（255，0，255，0）和rgba（255，255，0，0）-这两种颜色在理论上不同，但在实践中100%透明。这迫使浏览器正确地重新渲染，并解决了抖动问题

我最近也看到了这个问题。这很奇怪，因为它可以在第一个div中使用这种效果，但是在后续的div中，图像会被撕开，有些div甚至没有显示出来。我也看到它在FF和Safari中运行良好，但Chrome似乎存在问题（无法验证），Hi Fishbowl，我花了一些时间，但我最终找到了解决方案-我在下面发布了一个答案-希望能有所帮助。