在移动设备上滚动时，全屏英雄图像表现得很奇怪

Question

我的全屏英雄标题在移动设备上无效。它在滚动时改变高度，但我不知道为什么。这是代码：

<header id="header">
    <div class="hero">
      <h1>Asaxs</h1>
      <p>gotta be kidding me</p>
      <a href="#menu" class="btn btn-primary">Check</a>
    </div>
  </header>

header{
  background-image:url(https://c4.staticflickr.com/4/3798/9692831755_27d2032a69_k.jpg);
  background-size:cover;
  position:relative;
  height:100vh;
  max-height: 100vh;
  overflow: hidden;
}

.hero{
    padding-right: 60px;
    position:absolute;
    top:60%;
    text-align:right;
    width:100%;
    color:#fff;
    font-size:36px;
    -ms-transform: translate(0,-50%); /* IE 9 */
    -webkit-transform: translate(0,-50%); /* Safari */
    transform: translate(0,-50%);
}