javascript - 主体标签下方的额外间隙/缓冲区(没有人能解决这个问题)

Question

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 - 在 Mobile safari 和其他浏览器上查看它。

实时输出:http://output.jsbin.com/winuta/

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

---

原帖

这是 DIV 中固定到底部的文本区域的非常基本的精简版本。

我正在使用 Flat Bootstrap Admin V3 模板，由于许多消息传递部分存在问题，因此必须对其进行长时间调试。

我的页面在所有浏览器上都能正确显示，但 Mobile Safari 除外，它会在我的文本字段获得焦点时在键盘和正文之间创建一个缓冲区/间隙。

我设法解决了大部分错误，但是当涉及到移动设备时，我在 iOS Safari 上遇到了这个问题，当我专注于文本区域时，它在网页下创建额外缓冲区(我在 100VH 使用 body max-height - 我知道有 Buggy，但我已经使用 JS 和 $(window).innerHeight() 解决了这个问题，效果很好)，没有不管我怎么做。

我尝试使用 JS 将所​​有不同的 div 高度(包括 body 高度)调整为再减去 60px，但仍然存在差距。所有其他浏览器它会粘在键盘的正上方，但 iOS safari 不会。

任何人都可以阐明一些光吗？

文本区域代码

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

此模板主要基于 flex，但我使用的是页脚

.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.

更新(从评论中回答问题)

我的元标题已经设置如下

<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" />

页脚的完整 CSS

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

Answer 1

我的移动网络调试非常不稳定，我主要是后端开发人员所以如果我错了请原谅...

我相信这可能是因为 bottom: 0。将其更改为 top: 属性以进行检查。这可能没有太大帮助，因为您确实需要将它放在底部，但如果这是问题所在，请考虑切换到 flexbox 以尽可能定位它。

如果不是，修复可能涉及在视口(viewport)元标记中设置“height=device-height”。但如果我没记错的话，只有当相关元素位于/靠近底部时才有效。

希望这有助于...