Search code examples
javascriptcssgoogle-chromegoogle-chrome-devtools

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

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.

Solution

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