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

Question

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?

Probably a chrome rendering bug. – Kyle Nov 10 '11 at 13:26 — Kyle, Nov 10 '11 at 13:26
I have it also without the button, weird – Nov 10 '11 at 13:43 — , Nov 10 '11 at 13:43
Definitely a Redraw / Repaint bug. – c69 Nov 10 '11 at 20:15 — c69, Nov 10 '11 at 20:15

score 11 · Accepted Answer · answered Nov 11 '11 at 15:10

11

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.

answered Nov 11 '11 at 15:10

Cesar Canassa

18,659
11
66
69

This worked. When I applied this property to my style block where I set all my transitions, it broke something in my layout. I just set this property through a class and it worked! – Dan Nov 11 '11 at 16:13
1

This can cause another problem: z-index could be messed up. [See here to handle it](http://stackoverflow.com/questions/6953497/webkit-transform-overwrites-z-index-ordering-in-chrome-13). – yves amsellem Jan 16 '14 at 13:57

score 3 · Answer 2 · answered Nov 10 '11 at 20:00

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

This did not work, I tried applying class to animated element as well as body using the `jQuery` callback as well as `promise().done()` The `translate3d` solution did work... — Serj Sagan, Jun 19 '14 at 02:10

score 0 · Answer 3 · answered Jan 10 '12 at 02:22

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.

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

3 Answers3