iOS视口从输入转换

Question

我有一个输入，在焦点上，会改变大小。在将方向从横向更改为纵向时，iOS 7将所有内容向左移动，在右侧留下这个讨厌的黑条。这是一个simple example来测试。相关代码：

HTML：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">

<div class="appBody">
  <header>
    <div class="search">
    <form id="searchForm">
    <input type="search" id="search" placeholder="Search...">
    </form>
    </div>
  </header>

  <div class="content">
    Hi.
  </div>
</div>

CSS：

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

header {
  background: #333;
  height: 40px;
  line-height: 40px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  top: 0;
  left: 0;
  width: 100%;
}

.appBody {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  height: 100%;
}

.search {
  height: 30px;
  margin: 5px 5px 5px 0;
  position: absolute;
  top: 0;
  right: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  z-index: 3;
}
.search input[type=search] {
  background: #404040;
  box-shadow: 0 0 0 2px #222;
  border: 0 none;
  border-radius: 18px;
  color: #828282;
  height: 100%;
  padding: 0 15px 0 30px;
  transition: all 0.3s;
  width: 40px;
}
.search input[type=search]:focus {
  background: white;
  color: #262626;
  padding: 0 15px 0 40px;
  width: 220px;
}