Input field leaving artifacts from CSS3 transition (in Chrome 15)

Question

http://jsfiddle.net/danielcgold/SYgzJ/

When you click on the input then go on blur, artifacts are left on the screen in Chrome 15. I first noticed this issue on a site i've been developing so I eliminated everything but just the input field and a button. When I remove the button, the transition happens just fine. Any ideas?

Answer 1

Add this CSS to your input field:

input {
    -webkit-transform: translate3d(0,0,0)
}

This will force Chrome to use your GPU to do all the rendering which will solve the artifacts problem and make your animations smother.

Answer 2

This is a bug in Chrome's rendering of CSS transitions. But you can workaround it by forcing element "refresh" operation. Please note that you need to refresh not the input element, but it's parent, so the following code will help you:

$(document).ready(function(){
    $('#test').blur(function(){
      $(this).parent().addClass('repaint');
    });
    $('#test').focus(function(){
      $(this).parent().removeClass('repaint');
    });
});

And repaint class should have something related to parent's view, for example different color:

.repaint {
 color: red;
}

But you may replace color with visibility or other view-related (but not important/visible for parent) attribute.

Here is jsfiddle to demonstrate the workaround