html - Chrome redraw issue

Question

I'm getting an odd redraw issue in chrome:

See the broken right side? This is a div with a single background img.

HTML

<div id="resultsSortFilter>
  <!-- ... -->
</div>

CSS

#resultsSortFilter {
    float: left;
    width: 712px;
    height: 109px;
    margin: 7px 0 0 8px;
    background: url('../images/search_sortfilter_bg.png') no-repeat;
}

• No issues in any other browser
• Happens on newer versions only, we blocked the update to prevent this causing issues internally.
• Seems to be triggered by scrolling up and down before rendering is finished.
• Same issues on multiple sites

Has anyone else seen this? Anybody knows what's causing it or what Chrome intends to do about it?

Chrome version 26.0.1410.64 m

Update

The issue is on Windows and Mac OS. In fact seems worse on Mac.

I might have pinned it down further. We get the error on a page that contains lots of large images. I'm wondering if it has to do with the size of the data Chrome has to download?

This appears to make the issue go away (not going to call it a fix):

"It might be that the newer version of Chrome simply does not like your GPU. I have had issues similar to yours and have solved them by turning off the compositing and 3D acceleration features.

Type chrome://flags into the address bar and set the following items:

• GPU compositing on all pages: Disabled (Three options in a drop-down.)
• Disable accelerated 2D canvas: Enable (Click the link that says 'Enable', the box will turn white.)
• Disable accelerated CSS animations: Enable (Like above, the item will turn white.)
• Then click the button that shows up at the bottom of the page Relaunch now to restart chrome and test if this worked."

From https://askubuntu.com/questions/167140/google-chrome-with-strange-behavior

Update

The issue seems to be gone in later versions of Chrome.

Answer 1

Chrome is getting buggier. Something worth trying is forcing gpu hardware acceleration on the element.

Add this to the CSS to force hardware acceleration:

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