Fixed messaging bar pops up too high with keyboard on web application

Question

I have an adaptive web application. I was attempting to mimic the message bar commonly found on native mobile applications. However, even though I have the message bar set to fixed at the bottom, the message bar popus up too high and becomes unfixed when the keyboard appears.

The two pictures below shows how it begins and the second shows how it jumps up.

How it starts:

How it jumps up with keyboard

Application is in Ruby. Here is the form for the message:

<%= form_for(@message) do |f| %>
  <%= f.text_area :body, placeholder: "Write a message...", class: "message-box", required: true %>
  <%= f.hidden_field :match_id, value: @match.id %>
  <%= f.submit "Send",
    id: "send-message",
    data: { disable_with: "Loading..." }
  %>
<% end %>

Here is the jquery I'm using to expand the message while you type. I think it's important to show what I am using in order for advice on how to make it stick to the bottom:

var span = $('<span>').css('display','inline-block')
                      .css('word-break','break-all')
                      .appendTo('body').css('visibility','hidden');

function initSpan(textarea){
  span.text(textarea.text())
      .width(textarea.width())
      .css('font', textarea.css('font'));
}

$('.message-box').on({
    input: function(){
       var text = $(this).val();      
       span.text(text);
       $(this).height(text ? span.height() : '30px');
    },
    focus: function(){           
       initSpan($(this));
    },
    keypress: function(e){
       if(e.which == 13) e.preventDefault();
    }
});

SASS

  form{
    background-color: #f5f5f5;
    bottom: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top: 1px solid #d1d1d1;
    float: none;
    height: auto;
    margin: 0;
    padding: 0;
    position: fixed !important;
    width: 100%;
    z-index: 5;
    #message_body{
      background-color: $white;
      border: 1px solid #d1d1d1;
      border-radius: 10px;
      bottom: 7px;
      color: $dark_blue;
      float: none;
      font-size: 16px;
      font-weight: 400;
      height:25px;
      left: 10px;
      line-height: 20px;
      margin: 8px 0 0 10px;
      resize:none;
      overflow:hidden;
      padding: 5px 0 0 5px;
      width: 75%;
    }
    #send-message{
      background-color: #f5f5f5;
      border: none;
      bottom: 0;
      color: $dark_blue;
      height: 43px;
      float: none;
      font-size: 16px;
      font-weight: 600;
      line-height: 0;
      margin: 0;
      right: 10px;
      padding: 0;
      position: fixed;
      width: auto;
    }
    textarea{
      &::-webkit-input-placeholder {
        font-size: 16px;
        line-height: 16px;
        padding: 3px 0 0 5px;
      }
      &::-moz-placeholder {
        font-size: 16px;
        line-height: 16px;
        padding: 3px 0 0 5px;
      }

      &:-ms-input-placeholder {
        font-size: 16px;
        line-height: 16px;
        padding: 3px 0 0 5px;
      }

      &:-moz-placeholder {
        font-size: 16px;
        line-height: 16px;
        padding: 3px 0 0 5px;
      }
    }
  }

Any advice? Thanks.

Answer 1

If this is a known bug, you can try a temporary fix for each device that produces this problem.

First detect the device with something like this

/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)

Then try to dynamically change the fixed position for the focused and blurred states of your element:

$('.message-box').bind('focus blur', function(e){ 

   // These are example numbers as I can't test for your situation.
   // You might want to try margins or whatever works, as well as applying
   // them to all the fixed elements of your form.
   e.type == 'focus' && $(this).css('bottom','-150px');
   e.type == 'blur'  && $(this).css('bottom','0px');

});