应用 translate3d 时插入符号/文本光标停止答案

【问题标题】：Caret/Text Cursor stops when translate3d is applied应用 translate3d 时插入符号/文本光标停止
【发布时间】：2011-09-08 11:21:13
【问题描述】：

也许这是一个错误，但对我来说它在 Safari 和 Chrome 中都发生了很奇怪：

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

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

有什么解决方法吗？

【问题讨论】：

我也想知道是否有办法解决这个问题（没有完全删除转换，这是一个 PITA）
当我在悬停时对<a> 应用二维变换时，我遇到了类似的问题，指针光标丢失。
您应该在 webkit 网站上将此作为错误提交（因为 Chrome 和 Safari 均由 Webkit 提供支持。Jedidiah 的回答是我能得到的最接近插入符正常行为的答案。

标签： html css input webkit

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

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

这看起来现在可以解决问题，包括使光标再次闪烁，尽管当/如果您开始输入时光标会停止闪烁。

【讨论】：

那是浏览器支持它的情况。然后你就被一个可怕的基于计时器的解决方案困住了。