jQuery触发的Chrome flash开启转换

我正在尝试淡入/淡出滚动条上的背景图像

我使用jQuery

.addClass（）/.removeClass（）

触发事件，并使用CSS3更改第二个背景的不透明度

我想继续使用CSS3制作动画，但是当在chrome上触发动画时，会出现一个白色闪烁

有没有办法防止这种闪光？

HTML:

jQuery：

要解决此问题，可以将其添加到css（

正文

）中：

请改用此方法：

<div class="second_bg"></div>

将此css类更改为：

.second_bg {
    display:none;
    height:100%;
    background:#566c75;
}

与其添加和删除类，不如让它始终具有背景位置，只需使用

display:none

然后，您可以使用
fadeIn
和
fadeOut
来获得想要的效果。
下面的几个技巧有助于防止闪烁-只需将它们应用于
元素：


-webkit背面可见性：隐藏

-webkit转换：translate3d（0,0,0）

它对我来说没有任何问题，但出于某种原因，当我在你的小提琴中测试它们时，当在iframe中滚动时，属性似乎会出现问题-因此，在生产版本中使用此修复程序时，你应该谨慎，或者至少先测试它们

p/s：在本地机器上测试，为我工作。
添加
-webkit转换：translate3d（0,0,0）到
主体
，这使硬件加速似乎起作用

谢谢你的回答，但我想继续使用CSS3来制作动画，这种技术使用jQuery来淡入元素。啊，我是诚实地读到的，我只是认为这是一种偏好，而不是需要这样。我会继续关注css补丁@web Tiki只是出于好奇，你为什么要继续使用css@web tikiI尝试坚持使用CSS3，因为它应该更快看这里：看到了你的更新，闪光灯不再出现，但第一次淡出不再是动画了，我开始感到困惑…它仍然是动画的，做几次@web tikihey@Terry，你的第二次演示很好，但第一次演示时，第一次启动动画时，它不工作。。。
$(document).ready(function () {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 20) {
            $(".second_bg").addClass("fade-blue");
        } else {
            $(".second_bg").removeClass("fade-blue");
        }
    });
});

-webkit-backface-visibility: hidden;

<div class="second_bg"></div>

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 20) {
            $(".second_bg").fadeIn();
        } else {
            $(".second_bg").fadeOut();
        }
    });
});

.second_bg {
    display:none;
    height:100%;
    background:#566c75;
}