应用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 元素。

Answer 2

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

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

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

这看起来暂时解决了这个问题，包括使光标再次闪烁，尽管当/如果您开始键入时光标会停止闪烁。