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

Question

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?

Answer 1

I don't have a Retina display computer to test this with. My guess is you can try the "translateZ hack" on .container?

.container { -webkit-transform: translateZ(0); }

Not sure if that'll work or not. But in certain situations, it helps remedy browser repainting by separating that element into it's own "layer".

Hope this helps!

Answer 2

I found an explanation for this on a blog post by the postman team. They use the same solution listed above but explain why its happening. Try the snippet below it should fix it for you.

webkit-transform: translate3d(0,0,0);

http://blog.getpostman.com/2015/01/23/ui-repaint-issue-on-chrome/