input輸入光標(biāo)會出現(xiàn)在position提示框上面的問題

就像這樣，藍(lán)色的豎條是輸入框的光標(biāo)，如果輸入超過50個字的時候上面的提示框就會下來，但是光標(biāo)會浮在提示框的上面，不知道為什么。
項目使用的vue，提示框定位用的position: absolute;z-index是9999
input框套在一個position: fixed;定位的div里，這個div的z-index是99.
bug出現(xiàn)在手機(jī)版微信瀏覽器里，電腦版沒有這個問題

================代碼================

<div class="topHeader">
  <span class="backIcon" @click="goback">
    <i class="leftIcon"></i>
  </span>
  <input placeholder="故障現(xiàn)象" v-model="keyWord" maxlength="50" @focus="onfocus()"  @keyup="keyup($event)" @blur="onblur()" @input="oninput"/>
  <div class="HotspotClear">
    <i class="del"></i>
  </div>
  <div class="seachBtn" @click="search">搜 索</div>
</div>
<div class="warning" v-text="warningText" :style="this.warningSlide === true ? 'top:0;' : 'top:-1.18rem;' ">

css:

.topHeader {

width: 100%;
position: fixed;
top: 0;
z-index: 99;
height: .8rem;
line-height: .8rem;
background: #ffffff;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;

}

.warning {

width: 100%;
height: 1.18rem;
line-height: 1.18rem;
text-align: center;
color: #ffffff;
background: #d65454;
position: fixed;
top: -1.18rem;
transition: all .3s;
z-index: 9999;

}

topHeader 是input外層的盒子，和warning 彈出框在一個層級