Can I do anything about "repaints on scroll" warning in Chrome for "overflow:scroll" div

Question

In Chrome DevTools, under Rendering, there's an option to "Show potential scroll bottlenecks".

When I enabled this, some div elements I have on the screen with overflow:scroll show a flag at the top saying "repaints on scroll."

I can't find a lot of documentation on this feature, and I don't know whether it's something I can actually fix or improve upon, or just a statement of fact - the divs have content, and they do indeed scroll.

Answer 1

You can apply this CSS on the div with overflow: scroll or overflow: auto that create scroll bottlenecks.

transform: translateZ(0); -webkit-transform: translateZ(0); 

That will force the browser to create a new layer to paint this element, and sometimes fix scroll bottlenecks (especially with Webkit).

Answer 2

Although the accepted answer solves the problem, it is worth looking at the CSS will-change property. This is preferred over transform: translateZ(0); in recent times. Here is an that article explains the difference in detail - https://dev.opera.com/articles/css-will-change-property/

.scroll-container {   will-change: transform; }