Chrome redraw issue

Question

I\'m getting an odd redraw issue in chrome:

See the broken right side? This is a d

Answer 1

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 2

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.

Answer 3

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