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 s

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