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.