Caret/Text Cursor stops when translate3d is applied

Question

Perhaps this is a bug, but it is weird it happens both in Safari and Chrome for me:

http://jsfiddle.net/4bqkP/1/

When you apply CSS -webkit-transform: translate3D(10px, 10px, 0) to an input or any element that has an input inside, the caret cursor won't blink anymore neither can be controlled with the keyboard? (In fact the selection itself changes place when using the keyboard but the caret doesn't update its position)

Is there any workaround for this?

Answer 1

This is an annoying one. Updating one of the css properties on key down forces it to redraw the input, but it's not ideal as it relies on javascript. I toggle an invisible text shadow on keydown on the input, that lets you use the arrow keys to move the caret but doesn't fix the non-blinking caret.

http://jsfiddle.net/4bqkP/3/

$$('input, form').addEvent('keydown', function(e){
    $(this).toggleClass('force_redraw');
});

edit: added the form element to the script.

Answer 2

Based on Jedidiah's answer, I've improved the solution by using requestAnimationFrame to constantly toggle the classname of the input field regardless of keyboard activity.

http://jsfiddle.net/wBpNq/3/

var redraw = function() {
    $("#test1, #test2").toggleClass("force_redraw");
    window.webkitRequestAnimationFrame(redraw);
}
window.webkitRequestAnimationFrame(redraw);​

This looks to fix the issue for now, including making the cursor blink again, although when/if you start typing the cursor stops blinking.