Page scrolls in presence of virtual keyboard in iphone

Question

I have a chat application page on my website. The main container occupies the entire height and width on mobile devices. The container has position: fixed and 3 divs inside it position:absolute . The last div #app-msg-composer has textarea and sends a button inside it, like other chat applications. The following is a short code:

 <div id='app-container'> <div id='app-header'></div> <div id='app-body'></div> <div id='app-msg-composer'> <textarea></textarea> <button>Send</button> </div> </div> #app-container{ position: fixed; height:100%; width:100%; top: 0px; bottom:0px; } #app-header{ position:absolute; height:48px; width:100%; top:0px; } #app-body{ position:absolute; top:48px; bottom: 74px; width:100%; } #app-msg-composer{ position:absolute; bottom:0px; height:74px; width:100%; } 

When you press the textarea button and focus, the presence of a virtual keyboard makes the top half of the page to scroll up (from the viewing area). This issue only affects the iPhone because it works great on other Android devices. I searched for this problem and found that this is a common problem in iphone, because:

On iPhone, the presence of a virtual keyboard does not change the height of the viewport.

I tried some solutions from stackoverflow but didn't work. How to do this in javascript or css just because I am not using any library?

Answer 1

You need to change the CSS position property to fixed . Thus, it is literally "fixed." It also cannot be moved by resizing the screen.

An alternative method is to simply align it to the very top of the screen. This must be done so that the tip element is on top, in the middle in the middle ...