javascript - jQuery 或 Webkit 重复错误

Question

我有一个小网站，它利用了简洁的滚动技巧和 jQuery 的 .addClass()

基本上，网站会检查您是否滚动到某个点，然后在元素上设置类，使其具有额外的转换或动画。

在 Chrome 23.x 中，代码没有问题；
但是在 Mac 上的基于 Webkit 的浏览器中，以及在其他操作系统中的 Chrome 27.x+(我收到的最低版本的错误报告)中，当类被删除时元素“重复”。

该错误从未在 Firefox 中出现

这是Javascript

<script>
  $(window).scroll(function () {
      navi = $('#navi').height();
      logo = $('#navi .logo img').height();
      user = $('#user').height();

      if ($(window).scrollTop() >= navi - logo) {
          if (!$('#navi').hasClass("active")) {
              $('#navi').addClass("active");
          }
      } else {
        $('#navi').removeClass("active");
      }
      if ($(window).scrollTop() >= user) {
          if (!$('#user').hasClass("active")) {
              $('#user').addClass("active");
          }
      } else {
        $('#user').removeClass("active");
      }
  });
</script>

我不是 100% 认为 Javascript 有问题；可能是 Webkit 中的 CSS 导致了这个问题，无论哪种方式都让我很伤心。

这是一个Youtube Video的预期结果，这里是一个 Screenshot “Dupe”错误(我在 Linux 中运行 Chrome 23.x，所以我有一个 friend 截屏)
该页面位于 dev.brokengear.net/gatesofender

经过进一步挖掘，这似乎是某些浏览器由于其基于 Tile 的渲染系统而出现的问题。

Answer 1

我在 Chrome (Windows 7) 上也遇到了同样的错误。在滚动上获得 position:fixed 的元素被复制:一个保持固定，另一个滚动。

在我的例子中，这是因为我在上面的代码中有一个带有 transform 属性的元素。

修复:在重复的元素(固定元素)上添加-webkit-backface-visibility: hidden;