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

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.

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

I had a similar problem with box shadow artifacts in Safari, and found adding -webkit-transform:scale(1); to the focus rule fixed the problem.

See http://jsfiddle.net/SYgzJ/48/ – it should work fine now.

As Cesar said, -webkit-transform: translate3d(0,0,0); will fix it, but it can affect text rendering too.