1

我有一个小网站，它利用了巧妙的滚动技巧和 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 视频，这里是“Dupe”错误的截图（我在 Linux 中运行 Chrome 23.x，所以我让朋友截取了截图）
该页面可以在dev.brokengear.net找到/门禁者

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

4

3 回答 3

1

我对 Chrome 也有同样的错误（Windows 7）。滚动的元素position:fixed被复制了：一个保持固定，另一个滚动。

就我而言，这是因为我transform在代码中有一个具有上述属性的元素。

fix：添加-webkit-backface-visibility: hidden;重复的元素（固定元素）

于 2015-08-26T09:46:51.257 回答
0

position:fixed当您删除活动类时，浏览器似乎在切换回来时出现问题。尝试position:static为 .menu.user 类添加到您的 CSS

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

.menu.user {
  width: 226px;
  height: 64px;
  position:absolute;
  -webkit-transform: translate3d(0,0,0);
}
于 2013-08-21T05:34:19.743 回答
0

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

我得到的特定工件是由于渲染器无法处理我正在进行的渲染树更新的数量。滚动会导致很多这样的情况。

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

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

于 2013-08-22T01:45:21.957 回答