Дополнительный пробел/буфер ниже тега тела (никто не может решить это)

UPDATE. Похоже, что это определенная ошибка в iOS только для Safari. Веб-сайт при загрузке в виде веб-приложения (сохранение на дому) не отображается тот же промежуток/буфер. Вы должны только решить эту проблему.

JSBIN - просмотр его на мобильных Safari и других браузерах.

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

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

Оригинальная публикация

Это очень простая урезанная версия текстовой области в DIV с фиксированным снизу.

Я использую шаблон Flat Bootstrap Admin V3, который нужно отлаживать в течение длительного времени, так как многие части сообщений являются ошибками.

Моя страница отображается правильно во всех браузерах, кроме Mobile Safari, которая создала буфер/пробел между клавиатурой и телом, когда мое текстовое поле сосредоточено.

Мне удалась большая часть ошибок, но когда дело доходит до мобильных устройств, у меня есть эта проблема на iOS Safari, где, когда я фокусируюсь на области текста, это создает дополнительный буфер под веб-страницей (я использую максимальную высоту тела при 100VH - багги я знаю, но я уже решил проблему с помощью JS и $(window).innerHeight(), которая отлично работает), независимо от того, как я это делаю.

Я попытался настроить всю разную высоту div, включая высоту тела, минус еще 60 пикселей, используя JS, и он все еще оставляет зазор. Все остальные браузеры будут располагаться прямо над клавиатурой, но не сафари iOS.

Кто-нибудь может пролить свет?

Код текстовой области

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

Так окно чата просматривается во всем браузере, включая iOS Chrome и Firefox

Над изображением показано, как оно должно выглядеть нормально, без клавиатуры и пользователь не может прокручивать текстовую область, так как текстовая область снизу.

В iOS Safari создается разрыв между текстовой областью и клавиатурой

но изображение показывает разрыв между клавиатурой и текстовой областью в мобильном сафари

на iOS Chrome и Firefox отображаются как предназначенные без дополнительного пробела

Над изображением отображаются другие мобильные браузеры. Отображения Chrome и Firefox. штраф без дополнительного буфера.

ОБНОВЛЕНИЯ (Ответы на вопросы из комментариев)

Мой мета-заголовок уже задан как

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

Ответы

Ответ 1

Моя мобильная веб-отладка очень пятнистая, и я - основной разработчик, поэтому, пожалуйста, извините меня, если я ошибаюсь...

Я считаю, что это может быть из-за bottom: 0. Измените его на свойство top:, чтобы проверить. Это может не сильно помочь, так как вам нужно положить его на нижнюю часть, но если это проблема, подумайте о переходе на flexbox, чтобы поместить его, если это возможно.

Если это не так, исправление может включать установку "height = device-height" в метатеге viewport. Но если я правильно помню, это работает только в том случае, если данный предмет находится в/около дна.

Надеюсь, что это поможет...

Ответ 2

Во-первых, у вас есть медиа-запросы, которые могут быть неинтуитивно применены?

Во-вторых, когда вы используете гибкую коробку, до конца выравнивания всех элементов в нижнем колонтитуле внизу страницы: почему бы не сделать контейнер .footer

display: flex flex-direction: column-reverse;

В-третьих: рассмотрите возможность использования

margin-top: auto;

чтобы заставить элемент в нижней части его родительского контейнера, аналогично:

justify-content: flex-start;

Тем не менее, если вы не используете justify-content в контейнере, это может быть причиной вашей проблемы.

Наконец, а не самое поддерживаемое и идеальное решение, но должно быть выполнено, если вы можете определить, что элемент позиционируется таким образом из-за проблемы с браузером, находящейся вне вашего контроля, у вас есть варианты. Обнаружение ОС и отрицательная маржа приходят на ум. С javascript установка отрицательного края-дна может поместить ваш элемент по мере необходимости.

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