修复了使用鼠标滚轮滚动时的元素闪烁问题答案

【问题标题】：Fixed element flicker issue when using mousewheel scroll修复了使用鼠标滚轮滚动时的元素闪烁问题
【发布时间】：2012-11-04 07:39:16
【问题描述】：

我试图让侧边栏在滚动到某个点后固定在顶部。

var sidebarTopPos = $('#sidebar').offset().top;
$(window).scroll(function(event) {
    if ($(window).scrollTop() >= sidebarTopPos) {
        $('#sidebar').css({
            position: 'fixed',
            top: 0
        });
    }
    else {
        $('#sidebar').css({
            position: 'relative'
        });
    }
});

看看这个jsfiddle

当我向下拖动滚动条时，整个事情都很好。但是，当我尝试使用鼠标滚轮滚动时，当侧边栏从“相对”变为“固定”时，我看到烦人的闪烁，我尝试了很多东西。请帮忙。

编辑：也许我应该更清楚。侧边栏只有在穿过顶部 div 时才会“闪烁”

【问题讨论】：

似乎也可以在 Firefox 中使用。您在哪个浏览器中看到此问题？
我更新了 jsfiddle。 “顶部” div 的高度使得它不完全适合一个“鼠标滚轮滚动”，那么您将看到问题。我正在使用 Chrome 18
更具体地说，我看到“Test test test...”闪烁，因为它在假定正确位置之前稍微向上移动了一点
注意：它确实适用于所有其他浏览器。这很奇怪......无论如何，非常感谢你们！
@Jay Na 欢迎浏览器！

标签： jquery css-position flicker

【解决方案1】：

我遇到了同样的问题，这似乎是一个错误，当您的浏览器根据您的计算机 GPU、内存、CPU 等处理太多事情时会发生错误...，我能够修复它通过将以下转换代码添加到固定位置元素 (transform: translateZ(0);-webkit-transform: translateZ(0);) 来强制浏览器使用硬件加速来访问设备的图形处理单元 (GPU) 以使像素飞行。另一方面，Web 应用程序在浏览器的上下文中运行，这使软件可以完成大部分（如果不是全部）渲染，从而减少了转换的动力。但是 Web 一直在迎头赶上，现在大多数浏览器供应商都通过特定的 CSS 规则提供图形硬件加速。

使用-webkit-transform: translate3d(0,0,0);将为 CSS 过渡启动 GPU，使它们更平滑（更高的 FPS）。

注意： translate3d(0,0,0) 对您看到的内容没有任何作用。它在 x、y 和 z 轴上将对象移动 0px。这只是一种强制硬件加速的技术。

#sidebar {
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

【讨论】：

这根本解决不了问题。当我使用鼠标滚轮时，它会闪烁，当我使用滚动条时，它绝对是粘性的。在我的示例中没有发生任何事情。我认为这与GPU无关。我用的是 Chrome 43.0（准确的说：我不能使用固定定位）
太棒了！谢谢！

【解决方案2】：

我知道这是一个老问题，并且确定您已经找到了答案，但如果有人遇到同样的问题并需要解决它，只需将此 css 代码添加到侧边栏即可。

#sidebar {
   -webkit-backface-visibility: hidden;
   -webkit-perspective: 1000;
}

【讨论】：