CODEWITHSUNDEEP
htmlcssgoogle-chromedomscroll
Emmett
Emmett

Reputation: 14337

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

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:

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?

Upvotes: 8

Views: 3363

Answers (3)

WofWca
WofWca

Reputation: 706

Here is a similar question: Can I do anything about "repaints on scroll" warning in Chrome for "overflow:scroll" div

The modern approach seems to be

will-change: scroll-position;

Although MDN docs say that:

will-change is intended to be used as a last resort

Upvotes: 0

sebastienb
sebastienb

Reputation: 23

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/

Upvotes: 1

ItsJonQ
ItsJonQ

Reputation: 202

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!

Upvotes: 10

Related Questions