Can I do anything about "repaints on scroll" warning in Chrome for "overflow:scroll" div
css, google-chrome, google-chrome-devtools, javascript
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).
Problem
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.