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?

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?

• javascript
• html
• css

• What is the oute you expect? – yqlim Commented Sep 4, 2018 at 7:35
• The oute is in the middle of the image I've attached. – Sidharth Commented Sep 4, 2018 at 7:46
• 3 Is position: fixed; not an option? The resources of your code that you've given are very limited. – Rick Commented Sep 12, 2018 at 8:32
• If position:fixed; isn't desirable to have all the time, one solution I have used is to add and remove the class on input focus and blur respectively. – FlightOfGrey Commented Sep 13, 2018 at 0:42
• 1 @Sparky I'll have a snippet added to the question. – Sidharth Commented Sep 14, 2018 at 8:37

4 Answers 4

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 );

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';
}

have you tried <div> root </div> inside another <div> your_element </div>

I would advise you to use the position:fixed; top:0; on the header without creating clones.