Fixed elements (HTML) break after android keyboard

问题:

I am trying to place a text input at the bottom of the viewport/screen. It works fine, it even "sticks" to the top of the keyboard after the onfocus event.

When the keyboard is closed, however, there is lag between the changed position (top of keyboard) and the original position (bottom of viewport).

My css for the element is :

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

EDIT:

This behavior doesn't depend on fixed/absolute positioning only. Also inputs with position:relative or position:static have the same issue. It seems like the softkeyboard disappears much faster than the screen/browser view can update itself. Seems like a memory issue or a deep bug within Android's default browser (kill me now).

Here are some screenshots.

On focus :

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

On blur (note the blue screen ± is that a mem issue?):

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

回答1:

Had the similar case with android keyboard ruining layout, the following code should work for you.

We are getting current position from top, setting the top style value, and resetting bottom value.

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