UPDATE: It looks like this is a specific bug on the Safari iOS ONLY. Website when loaded as a web app (save on home) does not display the same gap/buffer. You should only be able to solve this.

JSBIN - View it on Mobile safari vs other browsers.

Live output: /

JSBin: ,js,output

Original Post

This is a very basic stripped down version of a text area in a DIV with Fixed to bottom.

I'm using the Flat Bootstrap Admin V3 template, which has to be debugged for a long time since many of the messaging portion is buggy.

My page displays correctly on all browsers except for Mobile Safari which created a buffer/gap between the keyboard and the body when my text field is focus.

I manage to work out most of the bug however when it es to mobile, i have this problem on iOS Safari where when I focus on the text area, it creates extra buffer under the webpage (I use body max-height at 100VH - Buggy i know, but i already resolved the issue using JS and $(window).innerHeight() which works great), no matter how I do.

I tried adjusting all the different div height including body height to minus another 60px away using JS and it still leaves the gap. All other browsers it will stick to right above the keyboard, but not iOS safari.

Any one can shed some light?

The text area code

<div class="footer">
          <div class="message-box">
            <textarea id="draftmsg" placeholder="type something..." class="form-control"></textarea>
            <button id="sendmsg" class="btn btn-default"><i class="fa fa-paper-plane" aria-hidden="true"></i><span>Send</span></button>
          </div>

This template is base mostly on flex but for the footer i using

.footer {
position: relative; /*Relative to the text display area which occupies whole viewport minus footer*/
bottom: 0;
}

Above image shows how it should look normally without keyboard and user cannot scroll past the text area since text area sticks to bottom.

but the image shows the gap between keyboard and text area in mobile safari

Above image shows other mobile browsers Chrome and Firefox displays fine without the extra buffer.

UPDATES (Answers to questions from ments)

My meta header has already set as follow

<meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/>   
<meta name="apple-mobile-web-app-capable" content="yes" />   
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Complete CSS for footer

.app-messaging .messaging > .footer {
    width: 100%;
    padding: 8px;
    background-color: #dfe6e8; }

.app-messaging .messaging > .footer .message-box {
    background-color: #FFF;
    border-radius: 2px;
    box-shadow: 0 1px 1px #c8d1d3;
    width: 100%;
    height: 80px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    border-top: 1px solid #dfe6e8; }
.app-messaging .messaging > .footer .message-box textarea, .app-messaging .messaging > .footer .message-box button {
    margin-bottom: 0;
    border: 0;
    height: 100%;
    border-radius: 0; }
.app-messaging .messaging > .footer .message-box textarea {
    -ms-flex: 1;
    flex: 1; }
.app-messaging .messaging > .footer .message-box button {
    border-left: 1px solid #dfe6e8;
    color: #29c75f; }
.app-messaging .messaging > .footer .message-box button .fa {
        margin-right: 1rem; }
#draftmsg {
    line-height: normal;
    padding-bottom: 0;
    margin-bottom: 0;
}

UPDATE: It looks like this is a specific bug on the Safari iOS ONLY. Website when loaded as a web app (save on home) does not display the same gap/buffer. You should only be able to solve this.

JSBIN - View it on Mobile safari vs other browsers.

Live output: http://output.jsbin./winuta/

JSBin: http://jsbin./winuta/edit?html,js,output

Original Post

This is a very basic stripped down version of a text area in a DIV with Fixed to bottom.

I'm using the Flat Bootstrap Admin V3 template, which has to be debugged for a long time since many of the messaging portion is buggy.

My page displays correctly on all browsers except for Mobile Safari which created a buffer/gap between the keyboard and the body when my text field is focus.

I manage to work out most of the bug however when it es to mobile, i have this problem on iOS Safari where when I focus on the text area, it creates extra buffer under the webpage (I use body max-height at 100VH - Buggy i know, but i already resolved the issue using JS and $(window).innerHeight() which works great), no matter how I do.

I tried adjusting all the different div height including body height to minus another 60px away using JS and it still leaves the gap. All other browsers it will stick to right above the keyboard, but not iOS safari.

Any one can shed some light?

The text area code

<div class="footer">
          <div class="message-box">
            <textarea id="draftmsg" placeholder="type something..." class="form-control"></textarea>
            <button id="sendmsg" class="btn btn-default"><i class="fa fa-paper-plane" aria-hidden="true"></i><span>Send</span></button>
          </div>

This template is base mostly on flex but for the footer i using

.footer {
position: relative; /*Relative to the text display area which occupies whole viewport minus footer*/
bottom: 0;
}

Above image shows how it should look normally without keyboard and user cannot scroll past the text area since text area sticks to bottom.

but the image shows the gap between keyboard and text area in mobile safari

Above image shows other mobile browsers Chrome and Firefox displays fine without the extra buffer.

UPDATES (Answers to questions from ments)

My meta header has already set as follow

<meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/>   
<meta name="apple-mobile-web-app-capable" content="yes" />   
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Complete CSS for footer

.app-messaging .messaging > .footer {
    width: 100%;
    padding: 8px;
    background-color: #dfe6e8; }

.app-messaging .messaging > .footer .message-box {
    background-color: #FFF;
    border-radius: 2px;
    box-shadow: 0 1px 1px #c8d1d3;
    width: 100%;
    height: 80px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    border-top: 1px solid #dfe6e8; }
.app-messaging .messaging > .footer .message-box textarea, .app-messaging .messaging > .footer .message-box button {
    margin-bottom: 0;
    border: 0;
    height: 100%;
    border-radius: 0; }
.app-messaging .messaging > .footer .message-box textarea {
    -ms-flex: 1;
    flex: 1; }
.app-messaging .messaging > .footer .message-box button {
    border-left: 1px solid #dfe6e8;
    color: #29c75f; }
.app-messaging .messaging > .footer .message-box button .fa {
        margin-right: 1rem; }
#draftmsg {
    line-height: normal;
    padding-bottom: 0;
    margin-bottom: 0;
}

• javascript
• jquery
• css
• mobile-safari

• can you please share the plete footer related css and also try left:0; bottom: 0; on footer class style. – Praveen Poonia Commented Nov 23, 2016 at 7:15
• @PraveenPoonia I've updated my question to show the related CSS. Tried left:0 doesn't work. I have to reillustrate that this is only problem on mobile css, everything else seems to be working perfectly without the gap. – Someone Special Commented Nov 23, 2016 at 7:53
• sometimes it's necessary to use css-reset even on bootstrap. have you use it? as you see when something is different in browsers I think it's related to default values – Saeed.Gh Commented Nov 24, 2016 at 7:36
• Have you tried setting the body's position: relative? – Manolis Commented Nov 25, 2016 at 21:59
• @S.Gholizadeh can you elaborate – Someone Special Commented Nov 27, 2016 at 2:59

2 Answers 2

My mobile web debugging is very spotty, and I'm a backend developer mostly so please excuse me if I'm wrong...

I believe it may be because of the bottom: 0. Change it to a top: property to check. That may not help much, since you do need to put it on the bottom, but if it is the issue, then consider switching to flexbox to position it if possible.

If not, the fix might involve setting "height=device-height" in the viewport meta tag. But if I remember correctly, that only works if the item in question is at/near the bottom.

Hope this helps...

First, do you have media queries which may be non-intuitively applying?

Second, as you're using flex box, to the end of aligning all elements within the footer container at the bottom of the page: why not make the .footer container

display: flex flex-direction: column-reverse;

Third: Consider using

margin-top: auto; 

to force the element to the bottom of it's parent container, similarly to:

justify-content: flex-start;

That said, if you aren't using justify-content on the container, this might be the root of your issue.

Finally, and not the most maintainable and ideal solution, but should make due, if you can determine that the element is positioned in this way due to a brower issue beyond your control, you have options as well. OS detection and negative margin e to mind. With javascript, setting negative margin-bottom could reposition your element as needed.

    //safari
    var isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);

    //ios
    var isIos = navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i)

    //Version
    var isIosVersion= /(iPhone)*(OS ([7-9]|1[0-9])_)/i.test(navigator.userAgent);