Фиксированная позиция CSS вызывает появление мягкой клавиатуры над текстовым полем в Android

Question

У меня есть окно чат-бота, и я должен расположить его в фиксированном правом нижнем углу. Ниже приведены настройки CSS для фиксированного позиционирования, а также настройки области просмотра.

Окна чата в фиксированном нижнем правом углу CSS имеют текстовое поле внизу.

В устройствах Android, когда это текстовое поле находится в фокусе, программная клавиатура появляется над текстовым полем, без нормального поведения веб-страницы movnig выше и позиционирования текстового поля над клавиатурой. Таким образом, пользователи не могут видеть, что они печатают.

Снимок экрана: https://ibb.co/G0mNQV8

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

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

Пожалуйста, обратитесь к следующим фрагментам кода, и если вы можете помочь решить его, было бы здорово.

@viewport {
  min-width: device-width ;
  zoom: 1.0 ;
  initial-scale:1.0;
  maximum-scale:1.0;
  user-scalable:1.0;
} 
@-ms-viewport {
  min-width: device-width ;
  zoom: 1.0 ;
  initial-scale:1.0;
  maximum-scale:1.0;
  user-scalable:1.0;
} 
#live-chat {
    display:none;
    bottom: 0;
    right: 0;
    position: fixed;  
    width: 99% !important;
    max-width:350px;
    max-height:100vh;
    background: #e9e9e9;
    color: #eae2e2;
    font: 100%/1.5em "Droid Sans", sans-serif;
    margin: 0;
    z-index: 10000;    box-shadow: 0px 0px 20px 4px #ccc;
}

<div id="live-chat-container">
    <div id="live-chat">



        <header class="clearfix">



            <a href="javascript:void(0);"  onclick="hidechat();" class="chat-close">x</a>



            <h4> <img src="https://www.xxxx.com/chat/cf-icon.png" width="32px" style="display:inline;vertical-align:middle;"> Chat with Us</h4>



            <span class="chat-message-counter">3</span>



        </header>



        <div class="chat">



            <div class="chat-history">


            </div> <!-- end chat-history -->



            <p class="chat-feedback" style="display:none;">Your partner is typing?</p>



            <form action="#" method="post" onsubmit="return chatsend();">

                <fieldset class="cbtgroup">

                    <input type="text" placeholder="Type your message?" id="cbt"  autocomplete="off"><input type="submit" value="&raquo;" class="cbt" id="cbtbtn">

                </fieldset>

            </form>
            <div style="font-size:xx-small;text-align:center;"><a href="https://www.xxxx.com" target="_blank">Powered by xxx.com</a></div>

        </div>



    </div> <!-- end live-chat -->

Answer 1

Я нашел решение этой проблемы и разместил его здесь, так как он будет полезен для всех, у кого такая же проблема.

1. Я обернул внешний div окна чата дополнительным div, присвоил ему фиксированное положение и верх, низ 0.

2. Затем изменил положение div окна чата на 'относительный' и имел высоту 93,9% его контейнера.

3. Свыше двух помогло устранить проблему с прокруткой (чтобы окно чата было зафиксировано справа внизу), а также не допускать использования мягкой клавиатуры для закрытия текстового поля

4. В Android была отмечена еще одна проблема, после которой программная клавиатура появлялась даже после того, как текстовое поле теряет фокус, поэтому использовала следующую функцию js, взятую из здесь .

#live-chat-wrapper{
    bottom: 0;
    right: 0px;
    position: fixed;
    width: 99% !important;
    max-width:351px;
    max-height:484px;
    margin: 0;
    z-index: 100000;
    -webkit-transform: translate3d(0,0,0);
}

#sigiriyalive-chat {
    display:none;
    bottom: 0;
    right: 0px;
    position: relative;
    width: 99% !important;
    max-width:350px;
    height: 93.9%;
    transition: height 1s ease;
    background: #e9e9e9;
    color: #eae2e2;
    font: 100%/1.5em "Droid Sans", sans-serif;
    margin: 0;
    z-index: 1000001;
    box-shadow: 0px 0px 20px 4px #ccc;
}

<div id="live-chat-wrapper">
    <div id="live-chat">
        <header class="clearfix">
            <a href="javascript:void(0);"  onclick="hidechat();" class="chat-close">x</a>
               <h4> <img src="https://www.wm.xxx.com/chat/xx-icon.png" width="32px" style="display:inline;vertical-align:middle;"> Chat with Us</h4>
            <span class="chat-message-counter">3</span>
        </header>
        <div class="chat">
            <div class="chat-history">
            </div> <!-- end chat-history -->
            <p class="chat-feedback" style="display:none;">Your partner is typing?</p>
            <form action="#" method="post" onsubmit="return chatsend();">
                <fieldset class="cbtgroup">
                    <input type="text" placeholder="Type your message?" id="cbt"  autocomplete="off"><input type="submit" value="&raquo;" class="cbt" id="cbtbtn">
                </fieldset>
            </form>
            <div style="font-size:xx-small;text-align:center;"><a href="https://www.xx.com" target="_blank">Powered by xx.com</a></div>
        </div> <!-- end chat --> 
    </div> <!-- end sigiriyalive-chat -->
</div>

function hidekeyboard() {
  //this set timeout needed for case when hideKeyborad
  //is called inside of 'onfocus' event handler
  setTimeout(function() {

    //creating temp field
    var field = document.createElement('input');
    field.setAttribute('type', 'text');
    //hiding temp field from peoples eyes
    //-webkit-user-modify is nessesary for Android 4.x
    field.setAttribute('style', 'position:absolute; top: 0px; opacity: 0; -webkit-user-modify: read-write-plaintext-only; left:0px;');
    document.body.appendChild(field);

    //adding onfocus event handler for out temp field
    field.onfocus = function(){
      //this timeout of 200ms is nessasary for Android 2.3.x
      setTimeout(function() {

        field.setAttribute('style', 'display:none;');
        setTimeout(function() {
          document.body.removeChild(field);
          document.body.focus();
        }, 14);

      }, 200);
    };
    //focusing it
    field.focus();

  }, 50);
}