Test - iOS focus input

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="chat-wrapper">
  <div class="msg-area">
    <div class="wrapper">
      <div class="profile-header">
        <div class="back-btn">
          <i class="fa fa-chevron-left"></i>
        </div>
        <div data-user-profile="Harry&nbsp;Atkinson">
          <div class="msg-user-avatar">
            <div class="image-holder" style="background-image: url(https://ca.slack-edge.com/T03U2S5HE-U04SFD1SF-6d66cfe8baf3-512)"></div>
            <i class="fa fa-user" aria-hidden="true"></i>
          </div>
          <span class="user-name">Harry&nbsp;Atkinson</span>
        </div>
      </div>
      <div class="message-body">

      </div>
      <div class="input-holder" data-new-message="" ontouchstart="">
        <div class="error-send">Couldn't send your message. Try again!</div>
        <div class="sending-to">Send to: <strong>Harry&nbsp;Atkinson</strong></div>
        <div class="message-input">
          <textarea class="form-control" rows="1" data-message-body="" style="overflow: hidden; word-wrap: break-word; height: 34px;" id="input-chat"></textarea>
        </div>
        <button class="message-input-btn btn btn-primary" type="button">
          <span>Send <i class="fa fa-paper-plane"></i></span>
          <div class="loader"><i class="fa fa-spinner"></i></div>
        </button>
      </div>
    </div>
  </div>
</div>

CSS

html, body {
  height: 100%;
}
.chat-wrapper {
  /*padding-top: 44px;*/
background: #f8f8f8;
position: relative;
display: flex;
height: 100%;
min-height: 100%;
color: #333;
overflow: hidden;
font-size: 14px !important;
line-height: 1.42857143 !important;
}
.msg-area {
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  z-index: 11;
  background: #f8f8f8;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
  overflow: hidden;
}

.message-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow: hidden;
  text-align: center;
  /* height: -webkit-calc(100% - 56px); */
  height: calc(100% - 56px);
}

.input-holder {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  padding: 10px 15px;
  background-color: #f2f2f2;
  display: flex;
}

.input-holder .message-input {
  position: relative;
  flex: 1;
}

.input-holder .error-send {
  position: absolute;
  top: -26px;
  left: 0;
  right: 0;
  height: 26px;
  font-size: 0.9em;
  line-height: 26px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  background-color: #FF5722;
  color: #ffffff;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

.input-holder .sending-to {
  position: absolute;
  top: -25px;
  left: 0;
  right: 0;
  background-color: rgba(216, 216, 216, 0.6);
  padding: 5px 15px;
  font-size: 0.8em;
  color: #888;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.input-holder .message-input-btn {
  flex: 0;
  background-color: #337ab7;
  border-color: transparent;
  border-radius: 0 !important;
  outline: none !important;
  height: 34px;
  margin-left: 15px;
  -webkit-flex-grow: 0.2;
  flex-grow: 0.2;
  -webkit-transition: -webkit-flex-grow 100ms...