Chrome慢速滚动与固定位置元素 [英] Chrome slow scrolling with fixed position elements

问题描述

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

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

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

任何想法的修复？

注意：当放大chrome ...时更加明显。

更新：我已经读过其他人有类似的问题， a href =https://code.google.com/p/chromium/issues/detail?id=139305>此Chrome问题，后来被合并到了

解决方案

.google.com / p / chromium / issues / detail？id = 136555> 136555

问题和如何监控

这是因为Chrome由于某些原因决定需要重新解码并调整任何图像时，固定面板超过它。

检查 strong>➔时间表➔点击记录

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

编辑（9/1/2016） 自从发布后，Chrome添加了新功能来帮助监控此操作：

► ➔检查➔呈现（底部标签）

➔☑滚动效果问题

➔☑绘制闪烁

➔☑FPS Meter

这将帮助您确定哪些元素需要在滚动上进行重绘，并在屏幕上清楚地突出显示。

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

更糟糕的是，你甚至不能通过在可滚动div上创建一个div来避免使用 position：fixed 属性。这实际上会产生相同的效果。很多Chrome说如果页面上的任何东西必须绘制在图像上（即使在iframe，div或任何它可能是），重新绘制该图像。因此，尽管您正在滚动它的div /框架，问题仍然存在。

。

但我确实发现了一个黑客来解决这个问题，似乎没有什么不足。

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

  / * （9/1/2016）：Seems translate3d在某些设备上比translatez（0）更好* / 
 -webkit-transform：translate3d（0，0，0） 
  

某些浏览器可能需要这样才能防止闪烁。

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

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

编辑： albb 向我指出了一个潜在问题;当使用
transform 时，所有后代 position：fixed / em>
元素将固定到该合成图层，而不是
整个页面。

。

替代解决方案

或者，您可以在滚动时隐藏顶部导航，然后再返回。你可以在jQuery中这样做：

  //＃network-bar指固定面板。这个例子适用于TheVerge.com 
 //注意在大多数实例中jQuery（）可以用$（）替换。 
 var isHidden = false; 
 function topNavScroll（）{
 $（window）.scroll（function（）{
 if（！isHidden）{
 //滚动屏幕时动画
 $（'＃network-bar'）。animate（{
 top：'-35px'
}，250，function（）{
 //使隐藏以禁用重新渲染
 $（'＃network-bar'）[0] .style.visibility =hidden;}）; 
 isHidden = true; 
} 
 clearTimeout ，'scrollTimer'））; 
 $ .data（this，'scrollTimer'，setTimeout（function（）{
 //完成滚动后显示在屏幕上，并显示
 $ '＃network-bar'）[0] .style.visibility =visible; 
 $（'＃network-bar'）。animate（{
 top：'0px'
} ，250，function（）{}）; 
 isHidden = false; 
}，1500））; 
}）; 
} 
  

On my I have a fixed DIV at the top, 3 fixed tabs and a fixed div at the bottom (this will only be shown when logged in - in the future).

I am getting poor scrolling performance on Chrome only - FF & IE are fine.

I have ready some problem reports about Chrome, Fixed Positioning and Scrolling and wanted to see if anyone had any suggestions? I really would like to fix these elements in their locations but I would also like good scrolling performance in Chrome.

Any Ideas on a fix?

Note: its much more noticeable when zoomed on chrome...

Update: I have read other people have a similar issues and updated this Chrome issue, which was later merged into 136555, allegedly fixed since Chrome 26.

解决方案

Problem and How to Monitor It

The reason for this is because Chrome for some reasons decides it needs to redecode and resize any images when a fixed panel goes over it. You can see this particularly well with

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

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

Edit (9/1/2016): Since posting this, Chrome added new features to help monitor this:

► 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.

This seems to just be a problem with the method Chrome is using to determine if a lower element needs to be repainted.

To make matters worse, you can't even get around the issue by creating a div above a scrollable div to avoid using the position:fixed attribute. This will actually cause the same effect. Pretty much Chrome says if anything on the page has to be drawn over an image (even in an iframe, div or whatever it might be), repaint that image. So despite what div/frame you are scrolling it, the problem persists.

.

The Easy Hack Solution

But I did find one hack to get around this issue that seems to have few downside.

By adding the following to the fixed elements

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

Some browsers might require this to prevent flickering

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

This puts the fixed element in its own compositing layer and forces the browser to utilize GPU acceleration.

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.

.

Alternative Solution

Alternatively, you could simply hide the top navigation while scrolling and bring it back in afterwards. You can do that like so in jQuery:

//#network-bar refers to the fixed panel. This example works on TheVerge.com
//Note also that jQuery() can be replaced with $() in most instances.
var isHidden = false;
function topNavScroll() {
   $(window).scroll(function() {
    if(!isHidden){
        //Animate off the screen while scrolling
        $('#network-bar').animate({
            top: '-35px'
        }, 250, function() {
        //Make hidden to disable re-rendering
        $('#network-bar')[0].style.visibility = "hidden";});
        isHidden = true;
    }
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        //Animate back on the screen when finished scrolling and make visible
        $('#network-bar')[0].style.visibility = "visible";
        $('#network-bar').animate({
        top: '0px'
      }, 250, function() {});
      isHidden = false;
    }, 1500));
});
}

这篇关于Chrome慢速滚动与固定位置元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！