Webpage slides up when soft keyboard is active

Question

I've got a chat page layout web application with input at the bottom, and a header at the top. when the input is in focus the page moves up.

These headers are present in my page for preventing zoom or other unwanted behaviour.

<meta name="viewport" content="width=device-width,initial-scale=1">

When trying to resize the window using javascript using window.innerHeight but that doesn't work as well even with a setTimeout()

Is there a workaround for the browser to not pan the whole page up, or resize with subtracting height of keyboard?

Answer 1

make a clone of header main element, and put it on the top of if whenever user focus into input would be a simplest answer.

$('#example').clone().addClass('cloned').prependTo('body');

However you must add unique class to that element, and give below css to that class,

.cloned {
    position:fixed;
    left:0;
    top:0;
    z-index:'give highest z-index';
}

Answer 2

Starting in Safari 10, the keyboard height doesn't affect window.innerHeight. Source:

Safari and WKWebView on iOS 10 do not update the window.innerHeight property when the keyboard is shown.

As you've found, not only does this make correctly sizing an element to the display area quite difficult, but there is no resize event when the keyboard is opened.

Because the keyboard slides the entire page out the top of the viewport, you may be able to calculate the display height using the difference between the window's height and the page's scrollTop property. To detect when the keyboard is open or closed, listen for the onfocus and onblur events on your input.

var myInput = document.getElementById( "your-input-field-id" );
var myContainer = document.getElementById( "your-container-id" );

myInput.addEventListener( 'onfocus', function() {
    var displayHeight = window.innerHeight - myContainer.scrollTop;
    myContainer.style.height = displayHeight + "px";
}, true );

myInput.addEventListener( 'onblur', function() {
    myContainer.style.height = "100%";
}, true );