Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome slow scrolling with fixed position elements

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.

like image 287
Adam Avatar asked Oct 19 '12 07:10

Adam


People also ask

How do I fix scrolling lag in Chrome?

Type chrome://flags in the Chrome address bar. Scroll down to find the Smooth Scrolling setting. Change the setting from Default to Disabled. Restart Chrome.

How do I speed up scrolling in Chrome?

Easy to use To activate the increased speed, hold the Alt key while scrolling.

Why does my scroll lag?

You may have a problem with a system setting or a graphics driver if you experience choppy scrolling on Web pages. The choppy page display could mean that your computer's touch device or mouse is set at too high of a scrolling interval or that the computer's graphics card isn't able to process graphics fast enough.

Which position will keep the element in the same place regardless of scrolling?

A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn't change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled.


1 Answers

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. Here is an example that could work on the stackoverflow.com's header or a site like theverge.com if pasted in DevTools > Console (or manually type "javascript:" into this pages URL bar and paste in the code below after it and hit 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); }; 
like image 117
corylulu Avatar answered Oct 15 '22 23:10

corylulu