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

Answer 2

I have had problems with this in webkit browsers, not only Chrome. I solved it by placing the following rule on my CSS:

html *:not(svg) {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0); /*only in IE10*/
}

This applies hardware acceleration on all elements except for svgs on FF/IE/Safari/Chrome if supported.

I do not apply the transformation on SVG tags since for some reason this was causing my svgs to not render properly, oddly applying this to the elements like rect inside the tag itself causes no problems.

So try to add this rule to your css and see if it solves your problem.

Answer 3

I have had this kind of issue when toggling display:none; display:block;

For example with jQuery.toggle()

The element in question was just a wrapper for the content I wanted to show and hide. So this is its parent which would expand or shrink vertically. It would look like this:

<div class="parent">
    <div class="child-to-toggle">
    </div>
</div>

child-to-toggle had no styling rules and, when hidden, a part of the parent wasn't redrawn correctly. (the bottom part)

Then, I added a css rule to child-to-toggle and the problem was solved. It looks like adding a css rule will force some redrawing in that case.

Despite the accepted answer, I am adding this one because enabling hardware acceleration on my computer, Macbook pro, OSX Maverick, Chrome 36, would completely mess up the UI with artefacts so I had to find another way.

Adding a css rule might help. In my case I added a border-top to child-to-toggle.