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

Question

也许这是一个错误，但在Safari和Chrome中都会发生这种情况很奇怪：

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

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

有没有解决方法呢？

Answer 1

这很烦人。在按键上更新其中一个css属性会强制它重绘输入，但它并不理想，因为它依赖于javascript。我在输入上的keydown上切换一个不可见的文本阴影，这样你就可以使用箭头键来移动插入符，但不会修复非闪烁的插入符号。

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

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

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

Answer 2

根据Jedidiah的回答，我通过使用requestAnimationFrame不断切换输入字段的类名来改进解决方案，无论键盘活动如何。

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

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

这看起来暂时解决了这个问题，包括让光标再次闪烁，不过当/如果你开始键入光标就会停止闪烁。