html - Chrome 使用固定位置元素缓慢滚动

Question

我的顶部有一个固定的 DIV，底部有 3 个固定的选项卡和一个固定的 div(这只会在登录时显示 - 将来)。

我在 Chrome 上的滚动性能很差 - FF 和 IE 都很好。

我已经准备了一些关于 Chrome、Fixed Positioning 和 Scrolling 的问题报告，想看看有没有人有什么建议？我真的很想在它们的位置修复这些元素，但我也希望在 Chrome 中有良好的滚动性能。

关于修复的任何想法？

注意:在 chrome 上放大时更明显...

更新:我读到其他人有类似的问题并更新了this Chrome issue , 后来合并到 136555 ，据称自 Chrome 26 以来已修复。

Answer 1

问题以及如何监控

这是因为 Chrome 出于某些原因决定在固定面板经过它时需要重新解码和调整任何图像的大小。你可以用

看得特别清楚

► Right-Click ➔ Inspect ➔ Timeline ➔ Hit ⏺ Record

► Go back to the page and drag scrollbar up and down (Mouse-wheel scrolling not as effective)

编辑(2016 年 9 月 1 日):自发布此内容以来，Chrome 添加了新功能以帮助监控此内容:

► Right-Click ➔ Inspect ➔ Rendering (Bottom tabs)

    ➔ ☑ Scrolling Performance Issues
    ➔ ☑ Paint Flashing
    ➔ ☑ FPS Meter (less important, but can be useful)

This will help you identify exactly what elements require repaints on scrolls and highlight them clearly on screen.

这似乎只是 Chrome 用来确定是否需要重新绘制下部元素的方法的问题。

更糟糕的是，您甚至无法通过在可滚动的 div 之上创建一个 div 来避免使用 position:fixed 属性来解决这个问题。这实际上会导致相同的效果。几乎 Chrome 会说如果页面上的任何内容必须绘制在图像上(即使是在 iframe、div 或其他可能的内容中)，请重新绘制该图像。因此，无论您滚动什么 div/frame，问题仍然存在。

.

简单的黑客解决方案

但我确实找到了一个似乎没有什么缺点的方法来解决这个问题。

通过在固定元素中添加以下内容

/* Edit (9/1/2016): Seems translate3d works better than translatez(0) on some devices */
-webkit-transform: translate3d(0, 0, 0);

一些浏览器可能需要这个来防止闪烁

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

这会将固定元素放在其自己的合成层中，并强制浏览器使用 GPU 加速。

EDIT: One potential issue was pointed out to me by albb; when using transform, all descendant position:fixed elements will be fixed to that composition layer rather than the entire page.

.

替代方案

或者，您可以简单地在滚动时隐藏顶部导航，然后再将其恢复。这是一个可以在 stackoverflow.com 上运行的示例的标题或类似 theverge.com 的网站如果粘贴到 DevTools > Console(或手动输入“javascript:”到此页面的 URL 栏，然后粘贴下面的代码并按回车键):

/* Inject some CSS to fix the header to the top and hide it
 * when adding a 'header.hidden' class name. */
var css= document.createElement("style");
css.type = 'text/css'; 
css.innerHTML = 'header { transition: top .20s !important; }';
css.innerHTML += 'header.hideOnScroll { top: -55px !important; }';
css.innerHTML += 'header { top: 0 !important; position: fixed !important; }';
document.head.appendChild(css);

var header = document.querySelector("header");
var reinsertId = null; /* will be null if header is not hidden */

window.onscroll = function() {
    if(!reinsertId) { 
      /* Hides header on scroll */
      header.classList.add("hideOnScroll");
      setTimeout(function() { header.style.visibility = "hidden"; }, 250);
    } else {
      /* Resets the re-insert timeout function */
      clearTimeout(reinsertId);
    }
    /* Re-insert timeout function */
    reinsertId = setTimeout(function(){
      header.classList.remove("hideOnScroll");
      header.style.visibility = "visible";
      reinsertId = null;
    }, 1500);
};