插入/文本光标在应用translate3d时停止

Question

也许这是一个错误,但它在Safari和Chrome中对我来说很奇怪:

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

当您将CSS -webkit-transform: translate3D(10px, 10px, 0)应用于输入或内部有输入的任何元素时,插入符号光标将不再闪烁,也无法用键盘控制？(事实上​​,选择本身在使用键盘时会改变位置,但插入符号不会更新其位置)

这有什么解决方法吗？

Answer 1

这是一件烦人的事情。按下按键时更新 CSS 属性之一会强制它重新绘制输入，但这并不理想，因为它依赖于 JavaScript。我在输入的按键上切换了一个不可见的文本阴影，它允许您使用箭头键移动插入符号，但不能修复不闪烁的插入符号。

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

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

编辑：将form元素添加到脚本中。