Question

我有一个小网站，利用整齐的滚动技巧和jQuery的.addClass（）

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

在Chrome 23.x中，代码没有问题;
但是在Mac上的基于Webkit的浏览器和其他操作系统中的Chrome 27.x +（最低的我已经得到了bug的报告）中，删除了类时“复制”元素。

这个bug从未出现在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，这是“Dupe”错误的Screenshot（我在Linux中运行Chrome 23.x，所以我有一个朋友拍摄截图）<登记/> 该页面可在 dev.brokengear.net/gatesofender

找到

进一步挖掘后，由于它的基于Tile的渲染系统，某些浏览器出现问题似乎是一个问题。

Answer 1

当您删除活动类时，看起来浏览器在从position:fixed切换回来时遇到问题。尝试将position:static添加到.ssu.user类

的css中

抱歉，没有发现您设置的绝对位置。 webkit伪像的常见修复是添加-webkit-transform: translate3d(0,0,0)样式。有点像IE的旧zoom:1修复，不会改变外观，但强制重绘。

.menu.user {
  width: 226px;
  height: 64px;
  position:absolute;
  -webkit-transform: translate3d(0,0,0);
}

Answer 2

事实证明，基于Webkit的浏览器（包括Chrome）有一个略微错误的基于图块的渲染器，如果在一定时间内有太多的Renter-Tree重排，它将会失败。

我得到的特殊伪像是由于渲染器无法处理我正在进行的渲染树更新的数量。滚动导致了很多这些。

我的解决方法是简单地检查具有“时间轴”功能和“显示绘制区域”选项的页面，并观察最新更新的内容，然后将其修剪回页面的其他区域，以减少回流

而且，这个问题似乎有一个差不多一年的错误;我已经为它提供了我的信息，并帮助他们为未来的开发人员http://code.google.com/p/chromium/issues/detail?id=151734

修复它

jQuery或Webkit重复错误

2 个答案: