使用mui-bar-tab固定在底部的输入框，在iOS上获取焦点错位

我是要实现聊天功能，当获取焦点的时候，输入框显示没太大问题，如下图：

当点击发送的时候，输入框就错位了，如下图

css代码

      body>.mui-bar {  
        box-shadow: 0 0 1px transparent;  
      }  
     .footer-right {  
        position: absolute;  
        width: 50px;  
        height: 50px;  
        right: 0px;  
        bottom: 0px;  
        text-align: center;  
        vertical-align: middle;  
        display: inline-block;  
      }  

      #send-btn {  
        width: 100% !important;  
        height: 80% !important;  
        color: red;  
        margin-top: 5px;  
      }  

      .footer-center {  
        position: absolute;  
        left: 0px;  
        width: calc(100% - 50px);  
        bottom: 0px;  
        height: 100%;  
        padding: 5px 0px;  
      }  

      .footer-center [class*=input] {  
        width: 100%;  
        height: 100%;  
        border-radius: 5px;  
      }  

      .footer-center .input-text {  
        background: #fff;  
        border: solid 1px #ddd;  
        padding: 10px !important;  
        font-size: 16px !important;  
        line-height: 18px !important;  
        font-family: verdana !important;  
        overflow: hidden;  
      }

html代码

   <nav class="mui-bar mui-bar-tab">  
      <div class="footer-center">  
        <textarea id='msg-text' type="text" class='input-text'></textarea>  
      </div>  
      <label class="footer-right">  
        <button type="button" id="send-btn" onclick="send();">发送</button>  
      </label>  
    </nav>

js代码

    function send() {  
        ui.content.focus();  
        ......  
   }