在 Chrome 中渲染故障

Question

我创建了一个通过滚动移动到当前窗口位置的菜单。当我立即上下滚动时，有时会在带有 OS X 10.9 和 Windows 7 的 Chrome 30 上出现故障。悬停后，锚标签会跳到正确的位置（向上 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

我同意 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 演示

Answer 2

我相当肯定这是一个渲染错误，因为：

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

幸运的是，触发重绘是一种相当直接的解决方法，尽管很烦人：

我为动画添加了回调：

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

jsFiddle Demo

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

祝你好运！