渲染Chrome中的故障

Question

我创建了一个菜单，通过滚动移动到当前窗口位置。当我立即向上和向下滚动时，有时在OS 30与OS X 10.9和Windows 7上出现故障。悬停后，锚标签跳转到正确的位置（向上1个像素）。我的代码有什么问题吗？这是一个已知的错误吗？

检查此JSFiddle Demo！

$(document).ready(function(){
  $(window).scroll(function(){
    var newTop = ($(window).scrollTop() + 40) +'px';
    $('#menu').stop().animate({ top: newTop}, 500);
  });
});

修改：已在Chrome 31中修复。

Answer 1

我非常确定这是一个渲染错误，因为：

1. 手动触发重绘会导致故障消失。
2. 我测试的其他浏览器中没有出现故障。

幸运的是，触发重绘是一个相当直接的解决方法，虽然令人讨厌：

我添加了对动画的回调：

$('#menu').stop().animate({ top: newTop }, 500, function(){
  $('#menu').css('overflow', 'hidden');
  setTimeout(function(){
    $('#menu').css('overflow', 'auto');
  }, 10);
});

jsFiddle Demo

不幸的是，似乎有必要设置和取消某些属性（这里我选择overflow）。 10有点粗略，但是当您正在处理浏览器渲染错误时，我不确定您能做得更好。

祝你好运！

Answer 2

我同意Adam，这绝对是一个渲染错误。如果您使用translate() transform-function为菜单设置动画，则不会发生。

使用此方法还有其他奖励：http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

jQuery核心不允许您使用开箱即用的translate()制作动画，但有一个插件可以http://ricostacruz.com/jquery.transit/启用此功能，或者您可以选择使用.css()并让css transitions做了繁重的工作。

---

以下是使用插件的示例：

var menu = $("#menu");
$(window).scroll(function(){
    var newTop = $(window).scrollTop();
    menu.stop().transit({ y: newTop +'px' }, 500);
});

http://jsfiddle.net/Hb3jS/5/

上的插件演示

---

以下是使用 CSS过渡：

的示例

JS

var menu = $("#menu");
$(window).scroll(function(){
    var newTop = $(window).scrollTop();
    menu.css({ transform: 'translateY(' + newTop +'px)' });
});

CSS

#menu { 
    transition: all .5s;
}

http://jsfiddle.net/Hb3jS/6/

的CSS演示