变身在镀铬中闪烁

Transformation flickers in chrome

本文关键字：闪烁 变身      更新时间：2023-09-26

>我对我的横幅元素进行了转换，该转换在滚动时稍微调整了图像的大小，请参见此处

转换的代码如下所示：

  $(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);
});

但我从未见过你在铬中谈论的闪烁。

相关文章：