Текстовые вводы в вертикально переведенном прокручиваемом div странно реагируют на ввод с клавиатуры

У меня проблемы с вводом текста в вертикально прокручиваемом div, который был переведен.

В браузере webkit просмотрите этот упрощенный пример:

http://jsfiddle.net/ZbguJ/3/

Прокрутите вниз div, щелкните текстовое поле и нажмите кнопку на клавиатуре. Элемент div прокручивается вверх, а сфокусированный ввод не отображается. Ожидаемое поведение заключается в том, что элемент div не должен прокручиваться, и пользователь может продолжать беспрепятственно вводить текст.

Это похоже на то, как если бы браузер определял, куда должен прокручиваться div, не принимая во внимание перевод.

Любые возможные обходные пути?

В реальном приложении рассматриваемый элемент использует перевод для анимации на экране. Замена перевода на анимацию CSS в свойстве top серьезно влияет на плавность анимации, но решает проблему прокрутки.


html css webkit-transform
person RHamilton    schedule 03.10.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Простой ответ: не используйте translate. Вместо этого используйте margin-top и margin-left. Я мог бы заставить вашу скрипку работать, сняв преобразование и добавив

margin-top: -200px;
person Sidharth Mudgal    schedule 03.10.2012
comment
Я думаю, что ОП уже знает об этом решении, но надеялся использовать перевод для анимации. - person grc; 03.10.2012
comment
Похоже, у webkit есть ошибка. Пока это не будет решено, это является обходным путем :) - person Sidharth Mudgal; 03.10.2012
comment
Использование CSS3-анимации сверху или margin-top не обеспечивает производительности аппаратного ускорения, которую обеспечивает перевод. Простое использование translate3d(0,0,0) в этой ситуации тоже не помогает. - person RHamilton; 03.10.2012

arrow_upward
0
arrow_downward

Нашел обходной путь, подумав об этом утром в душе.

Оберните прокручиваемый контент в родительский div, нормально переведите родительский div, переведите прокручиваемый div равным и противоположным родительскому div и установите top или margin-top на величину родительского перевода, чтобы правильно выровнять внутренний div. См. обновленный пример в этой скрипте: http://jsfiddle.net/ZbguJ/5/

#Parent {
    -webkit-transform: translate(0, -200px); /* animated */
}
#Child { 
    -webkit-transform:  translate(0, 200px);
    top: -200px;
    position:relative;
}

Глупо, но это делает работу.

person RHamilton    schedule 03.10.2012