Курсор / текстовый курсор останавливается при применении 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');
});

edit : добавлен элемент form в скрипт.

Answer 2

Основываясь на ответе Джедидии, я улучшил решение, используя requestAnimationFrame, чтобы постоянно переключать имя класса поля ввода независимо от активности клавиатуры.

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

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

ЭтоПохоже, на данный момент эта проблема решена, включая повторное мигание курсора, хотя, когда / если вы начинаете печатать, курсор перестает мигать.