Javascript 铬中的变换闪烁

我对我的横幅元素进行了一个转换，它在滚动时稍微调整了图像的大小

转换代码如下所示：

  $(window).scroll(function(){
    var x = $(this).scrollTop(),
        transY = (x * 0.5), scale = 1 + (x * 0.0003),
        transform = 'translateY('+transY+'px) scale('+scale+') translate3d(0,0,0)';
    $('#myCarousel .carousel-inner').css({
      opacity: 1 - (x * 0.0008),
      WebkitTransform: transform,
      MozTransform: transform,
      msTransform: transform,
      transform: transform
    });
  });

我的问题是，虽然动画在firefox中运行得非常流畅，但在chrome中我得到了闪烁/可见的大小调整效果

---

css中是否有我需要更改的内容，以使其在chrome中平稳运行，或者此浏览器无法轻松转换？

您可以尝试使用setTimeout进行基本测试：

$(window).scroll(function(){
    var x = $(this).scrollTop(),
        transY = (x * 0.5), scale = 1 + (x * 0.0003),
        transform = 'translateY('+transY+'px) scale('+scale+') translate3d(0,0,0)';


    setTimeout(function(){

        $('#myCarousel .carousel-inner').css({
          opacity: 1 - (x * 0.0008),
          WebkitTransform: transform,
          MozTransform: transform,
          msTransform: transform,
          transform: transform
        });

    }, 3);


}); // - EOF - $(window).scroll(function()

---

我会这样做：

var x, transY, transform, scale, c = $('#myCarousel .carousel-inner');
$(window)
    .scroll(function() {
        x = $(this)
            .scrollTop();
        transY = (x * 0.5);
        scale = 1 + (x * 0.0003);
        transform = 'translateY(' + transY + 'px) scale(' + scale + ') translate3d(0,0,0)';
    });
requestAnimationFrame(function anim() {
    c.css({
        opacity: 1 - (x * 0.0008),
        WebkitTransform: transform,
        MozTransform: transform,
        msTransform: transform,
        transform: transform
    });
    requestAnimationFrame(anim);
});

---

但我从未见过你在chrome中所说的闪烁。

看起来你想从开始状态到结束状态制作CSS动画。也许像您现在这样递增，而不是依赖CSS进行动画描述，这是一种过分的做法。您是否尝试在Chrome开发工具中记录时间线？你看到到处都是钉子吗（在30fps的吧台上）？是的，远远超过30fps。不幸的是，设置超时使情况变得更糟。。。你认为使用纯css会更好/可能吗？我在Chrome39MacOSX上没有任何性能问题，在60fps下一切都很顺利-Mozilla/5.0（Macintosh；Intel MacOSX 10_8_5）AppleWebKit/537.36（KHTML，像Gecko）Chrome/39.0.2171.71 Safari/537.36是的，小提琴对我来说非常好。我的图片对于动画来说可能有点太大，不太确定。在现实世界中，图像是否来自服务器端？它重吗？在我个人使用setTimeout的经历中，我看不出有什么不同。不过，这应该是标准做法，因为它更准确地考虑了用户机器的浏览器和GPU功能。