Исправлен разрыв элементов (HTML) после исчезновения клавиатуры Android?

Question

Я пытаюсь разместить текстовый ввод внизу области просмотра / экрана. Он отлично работает, он даже "прилипает" к верхней части клавиатуры после события onfocus.

Однако, когда клавиатура закрыта, между измененным положением (верх клавиатуры) и исходным положением (нижняя часть окна просмотра) существует задержка.

Мой CSS для элемента:

.fixed {
    position: absolute;
    z-index: 1000;
    height: 50px;
    display: block;
    bottom: 0px;
    width: 100%;
 }

РЕДАКТИРОВАТЬ:

Это поведение не зависит только от фиксированного / абсолютного позиционирования. Также входы с положением: относительным или положением: статическим имеют ту же проблему. Кажется, что софт-клавиатура исчезает намного быстрее, чем может обновляться представление экрана / браузера. Похоже на проблему с памятью или серьезную ошибку в браузере Android по умолчанию (убей меня сейчас).

Вот несколько скриншотов.

На фокусе:

http://i.cubeupload.com/AQS7h8.png

При размытии (обратите внимание на синий экран ± это проблема с памятью?):

http://i.cubeupload.com/nV3kMh.png

Answer 1

Если бы аналогичный случай с раскладкой клавиатуры Android, следующий код должен работать для вас.

Мы получаем текущую позицию сверху, устанавливаем верхнее значение стиля и сбрасываем нижнее значение.

var fixed = document.querySelector(".fixed"),
    distanceFromTop = fixed.getBoundingClientRect().top;
fixed.style.top = distanceFromTop + 'px';
fixed.style.bottom = 'auto';