Cursor / Text cursor stops when applying translate3d

Question

This may be a mistake, but it is strange that this happens in both Safari and Chrome for me:

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

When you apply CSS -webkit-transform: translate3D(10px, 10px, 0) to an input or to any element that has an input inside, the cursor will not blink anymore, none of them can be controlled using the keyboard? (In fact, the choice itself changes its place when using the keyboard, but the carriages do not update their position)

Is there any workaround for this?

Answer 1

This is annoying. Updating one of the css properties when a key is pressed causes it to redraw the input, but is not ideal because it relies on javascript. I switch the invisible text shadow to keydown at the input, which allows you to use the arrow keys to move the cursor, but does not fix non-blinking carriages.

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

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

edit: added a form element to the script.

Answer 2

Based on Jedidiah's answer, I improved the solution using requestAnimationFrame to constantly switch the class name in 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 fixes the problem at the moment, including making the cursor blink again, although when / if you start typing, the cursor stops blinking.