Question

在我的上方，我有一个固定的DIV在顶部，3个固定的标签和一个固定的div在底部（这将只在登录时显示 - 将来）。

我在Chrome上的滚动效果不佳 - FF＆amp; IE很好。

我已准备好一些关于Chrome，固定定位和滚动的问题报告，想知道是否有人有任何建议？我真的想在他们的位置修复这些元素，但我也希望在Chrome中有良好的滚动性能。

关于修复的任何想法？

注意：放大Chrome时更加明显......

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

Answer 1

问题及如何监控

之所以如此，是因为Chrome出于某些原因决定在固定面板越过它时需要重新编码和调整任何图像的大小。

你可以很好地看到这一点

►右键单击 ➔检查➔时间轴➔点击⏺记录

►返回页面并上下拖动滚动条（鼠标滚轮滚动效果不佳）

编辑（9/1/2016）： 自发布此消息后，Chrome添加了新功能以帮助监控此问题：

►右键单击 ➔检查➔渲染（底部标签）

➔☑滚动性能问题
  ➔☑油漆闪烁
  ➔☑FPSMeter （不太重要，但可能有用）

这将帮助您准确识别哪些元素需要在卷轴上重新绘制并在屏幕上清晰地突出显示它们。

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

更糟糕的是，您甚至无法通过在可滚动div上方创建div来避免使用position:fixed属性。这实际上会产生同样的效果。几乎Chrome都说如果页面上的任何内容都必须在图像上绘制（即使在iframe，div或其他任何内容中），请重新绘制该图像。因此，尽管您正在滚动它的div / frame，问题仍然存在。

Easy Hack解决方案

但是我确实找到了一个解决这个问题的黑客，似乎有一点缺点。

将以下内容添加到固定元素

/* 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加速。

One potential issue向我指出了
编辑： albb;使用时 transform ，所有后代 position:fixed 元素将固定到该组合层而不是整页。

。

替代解决方案

或者，您可以在滚动时隐藏顶部导航，然后将其重新导入。如果粘贴在 DevTools＆gt;中，则可以在stackoverflow.com标题或theverge.com等网站上使用此示例。控制台（或在此页面网址栏中手动输入“ javascript：”并粘贴到下面的代码中并按Enter键）：

/* 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);
};

Answer 2

@Corylulu的第一个解决方案有效，但不完全（仍然有点断断续续，但更少）。我还必须将-webkit-backface-visibility: hidden;添加到固定元素中，以便无条件。

所以对我来说，当在页面上使用固定元素时，以下工作就像一个魅力，以防止在Chrome中向下滚动：[/ p>

-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;

编辑：Webkit-transform和webkit-backface-visibility都会导致模糊的字体和图像。因此，请确保仅在悬停状态下同时应用它们。

Answer 3

将此规则添加到您的固定元素

int

从Here了解解决方案并阅读Here中的将更改属性。

Answer 4

最近有关于这个特别恼人的问题的错误报告： http://code.google.com/p/chromium/issues/detail?id=155313

它与浮动元素和大图像的组合有关。 Chrome Canary 24.0.1310.0仍有问题。

Answer 5

有很多方法可以加快这个前端的速度，试用PageSpeed Insights Chrome插件来获取一些想法。就个人而言，我建议在Twitter's Bootstrap这样的框架之上使用相同的设计重建这个前端，但是如果你想在这个前端有一些细节：

正如您所说，标题栏的位置导致CSS渲染时间最长（CSS stress test results）。摆脱那里的big image并用1px宽的背景图像替换它。您还需要不必要地调整your logo（以及此标头中的所有其他图像）等图像的大小，替换为实际大小的版本
您可以节省optimizing所有内容图片传输的大量字节

Chrome使用固定位置元素进行慢速滚动

5 个答案:

问题及如何监控

Easy Hack解决方案

替代解决方案