Chrome repaints div on scroll differently on low- and high-DPI displays

Viewed 3194

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:

enter image description here

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

enter image description here

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

2 Answers
Related