I'm working on optimizing scrolling performance in my web app, and ran into interesting behavior on the latest Chrome (v31), which also repros on Chrome Canary (v34).
In this simplified example, I have a simple scrollable div:
<style>
.container {
width: 200px;
height: 200px;
overflow: auto;
background: #ccc;
}
.container div {
height: 80px;
width: 80px;
background: #555;
border-radius: 10px;
}
</style>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
I enabled the following Chrome dev settings to investigate scrolling perf:
- "Show paint rectangles" (indicated by red rectangular outlines)
- "Show potential scroll bottlenecks"
When I load the webpage on a non-retina display, it repaints the entire container div on every scroll, and Chrome even indicates as such:

But when I move the window to my retina display and refresh the page, scrolling perf improves! It only repaints the scrollbar itself (and sometimes also content that was not previously in the scroll viewport):

The high-DPI behavior seems preferable, and scrolling is faster. Is there any way to achieve this performance in Chrome regardless of DPI?